Olay İşleyicileri uyarı atamadı (html, javascript)

html'de basit olay işlemeyi öğrenmeye çalışıyorum. Girilen veriye ihtiyaç duyan birkaç alan oluşturdum. Koddan görebileceğiniz gibi, niyetim, sayıların belirli bir aralıkla sınırlı olmasıdır. Bu aralıkların dışında değerler girdiğim için, uyarılarım sönmüyor. Eğer herkes beni doğru yöne yönlendirirse, bu harika olur.Olay İşleyicileri uyarı atamadı (html, javascript)

HTML Dosyası:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="script_5.7.js"></script> 
</head> 
<body> 
<h3>User Information</h3> 
<form action=""> 
    <p> 
     <label> 
      Age: 
      <input type="text" id="theAge"/> 
     </label> 
     <br/><br/> 

     <label> 
      Weight: 
      <input type="text" id="theWeight"/> 
     </label> 
     <br/><br/> 

     <input type="submit" id="submit"/> 
    </p> 
    </form> 
<script type="text" src="script2_5.7.js"></script> 

</body> 
</html>

ilk js dosyası:

function chkAge() { 
    var theAge = document.getElementById("custAge"); 

    if (theAge < 17 || theAge > 80) { 
     alert("Please Enter a Valid Age!"); 
     return false; 
    } 
    else 
     return true; 
    } 

function chkWeight() { 
    var theWeight = document.getElementById("custWeight"); 
    if (theWeight < 80 || theWeight > 300) { 
     alert("Please Enter a Valid Age!"); 
     return false; 
    } 
    else 
    return true; 
    }

ikinci js dosyası:

document.getElementById("theAge").onsubmit = chkAge; 
document.getElementById("theWeight").onsubmit = chkWeight;

kaynak

2016-04-05 Aaron Ratliffe

html formunuzda, işlevlerinizi tetiklemek için bir işlem bile yapılmıyor mu? –

Şimdi ne demek istediğimi görüyorum. Eski bir ders kitabından bir örnek takip ediyordum ve form eyleminin rolünü bilmiyordum. Her zaman kovulacakları yer burası mı? –

cevabımı gör, sizin için tamir ettim –

function chkAge() { 
    var theAge = document.getElementById("custAge"); 


    if (theAge.value < 17 || theAge.value > 80) { 
     alert("Please Enter a Valid Age!"); 
     return false; 
    } 
    else 
     return true; 
    } 

function chkWeight() { 
    var theWeight = document.getElementById("custWeight"); 
    if (theWeight.value < 80 || theWeight.value > 300) { 
     alert("Please Enter a Valid Age!"); 
     return false; 
    } 
    else 
    return true; 
    }

Kontrol bu yardımcı olur. http://www.w3schools.com/jsref/prop_text_value.asp da, bu eğiticiyi kontrol edin.
DOM form öğeleri! == onların değerleri.

kaynak

2016-04-05 23:22:45 IdeaMan

Sen dolayısıyla sunuldu sizin fonksiyonları çağrılan asla formunuzda bir tıklama olayı yoktu .. .value eleman kullanmak sahip javascript kullanarak bir değer elde Ayrıca zaman .. Aşağıdaki deneyin:

function handleClick(){ 
 
    chkAge(); 
 
    chkWeight(); 
 
} 
 

 
function chkAge() { 
 
    var theAge = document.getElementById("theAge").value; 
 

 
    if (theAge < 17 || theAge > 80) { 
 
     alert("Please Enter a Valid Age!"); 
 
     return false; 
 
    } 
 
    else 
 
     return true; 
 
    } 
 

 
function chkWeight() { 
 
    var theWeight = document.getElementById("theWeight").value; 
 
    if (theWeight < 80 || theWeight > 300) { 
 
     alert("Please Enter a Valid weight!"); 
 
     return false; 
 
    } 
 
    else 
 
    return true; 
 
    }

<!DOCTYPE html> 
 

 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta charset="utf-8" /> 
 
<title></title> 
 
<script type="text/javascript" src="script_5.7.js"></script> 
 
</head> 
 
<body> 
 
<h3>User Information</h3> 
 
<form action="" onSubmit="return handleClick()"> 
 
    <p> 
 
     <label> 
 
      Age: 
 
      <input type="text" id="theAge"/> 
 
     </label> 
 
     <br/><br/> 
 

 
     <label> 
 
      Weight: 
 
      <input type="text" id="theWeight"/> 
 
     </label> 
 
     <br/><br/> 
 

 
     <input type="submit" id="submit"/> 
 
    </p> 
 
    </form> 
 
<script type="text" src="script2_5.7.js"></script> 
 

 
</body> 
 
</html>

kaynak

2016-04-05 23:24:34

Kod snippet'ini çalıştırdım ve kodumu sizinkiyle eşleştirdim. Bazı nedenlerden dolayı uyarı her seferinde atılıyor. –

tekrar denemiyor .. Yaşı 25'e girdiğimde ve 834231 yaşın üzerinde sadece kilo uyarısı vb. Gösterecektir. –

aradığınız edilmiyor olması fonksiyonları. chkAge ve chkWeight ikinci js dosyasında need().

document.getElementById("theAge").onsubmit = chkAge(); 
document.getElementById("theWeight").onsubmit = chkWeight();

Ayrıca sadece size üzerinde bu kutuların değeri saklamak için ilk ihtiyaç göndermek üzerinde iki giriş kutularına değerini test etmek için

<button onclick="chkAge()">Click me</button>

kaynak

2016-04-05 23:28:46

onları test için bir düğme ile işlevlerini diyebiliriz js böylece şartlı ifadelerin kontrol etmek için bir şey var. Sen değişkenler ancak bu chkAge ve chkWeight html'nizin mevcut değil id seçicisi olarak tanımlanmamış dönen edilir theWeight sizin theAge ve ile bunu çalışıyorsunuz.

semantik html amacıyla ek olarak
, sizin etiket etiketleri girişine de değerine ihtiyacımız etiketler ayrı bir eleman olması gerekir özelliğini kontrol etmek için js üzerinde mağaza şey hedefleyebilir ve böylece .
Ben p etiket kaydırıcı kaldırılması ve olay dinleyicisi ilgili form bir id vererek theAge ve theWeight girdi değeri özelliklerini hedefleyen bir çalışma örneği olarak kodunuzu yeniden kaleme aldık
:

function checkDetails(event) { var theAge = document.getElementById("theAge").value, theWeight = document.getElementById("theAge").value; if (theAge < 17 || theAge > 80) { event.preventDefault(); alert("Please Enter a Valid Age!"); } if (theWeight < 80 || theWeight > 300) { event.preventDefault(); alert("Please Enter a Valid Weight!"); } } document.getElementById("myForm").addEventListener("submit", checkDetails);

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <h3>User Information</h3> <form id="myForm" action=""> <p> <label for="theAge">Age:</label> <input type="text" id="theAge" value=""/> <br/><br/> <label>Weight:</label> <input type="text" id="theWeight" value=""/> <br/><br/> <input type="submit" id="submit"/> </p> </form> </body> </html>

çalışma js bin link - https://jsbin.com/jiyibuwexi/edit?html,js

kaynak

2016-04-06 00:02:28

Olay İşleyicileri uyarı atamadı (html, javascript)

cevap

İlgili konular