Event Handlers keine Warnungen (html, javascript)

Ich versuche, einfache Ereignisbehandlung in HTML zu lernen. Ich habe ein paar Felder erstellt, für die Daten eingegeben werden müssen. Wie Sie aus dem Code entnehmen können, sind die Zahlen auf einen bestimmten Bereich beschränkt. Aus irgendeinem Grund werden bei der Eingabe von Werten außerhalb dieser Bereiche keine Warnungen ausgegeben. Wenn mich jemand in die richtige Richtung lenken könnte, wäre das großartig.Event Handlers keine Warnungen (html, javascript)

HTML Datei:

<!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>

erste js-Datei:

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; 
    }

an zweiter Stelle js-Datei:

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

Quelle

2016-04-05 Aaron Ratliffe

Ihr HTML-Formular hat nicht einmal eine Aktion darauf, um Ihre Funktionen auszulösen? –

Ich sehe was du jetzt meinst. Ich folgte einem Beispiel aus einem alten Lehrbuch und erkannte nicht die Rolle der Formularaktion. Werden sie immer gefeuert? –

sehe meine Antwort Ich habe es für Sie behoben –

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; 
    }

Überprüfen Sie, ob das hilft. http://www.w3schools.com/jsref/prop_text_value.asp auch, überprüfen Sie dieses Tutorial.
DOM Formelemente! == ihre Werte. mit Hilfe von Javascript Sie verwenden, um das .value Element .. versuchen, die unten

Quelle

2016-04-05 23:22:45 IdeaMan

Sie, wenn es darum nie aufgerufen werden wurden Ihre Funktionen eingereicht wurde .. Auch nicht ein Click-Ereignis auf dem Formular haben, wenn ein Wert erhalten:

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>

Quelle

2016-04-05 23:24:34

Ich habe das Code-Snippet ausgeführt und auch meinen Code an Ihren angepasst. Aus irgendeinem Grund wird die Warnung jedes Mal ausgelöst. –

es nicht wieder versuchen .. Wenn ich sage 25 im Alter und 834231 in das Gewicht auf dem Alter nur die Gewichtsanzeige wird etc .. so funktioniert, wie Sie es auch wollen würde ... –

Die Funktionen, die Sie haben nicht dazu aufgerufen werden. chkAge und chkWeight auf der zweiten js-Datei müssen().

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

Sie könnten auch einfach anrufen, die Funktionen mit einem Knopf sie

testen

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

Quelle

2016-04-05 23:28:46

Um den Wert Ihrer beiden Eingabefelder testen Sie anschließend auf erste Notwendigkeit, den Wert dieser Boxen speichern auf Die js so Ihre bedingten Aussagen haben etwas zu überprüfen. Sie versuchen, dies zu tun mit Ihrem theAge und Das Gewicht Variablen jedoch diese als ID-Selektor chkAge und chkWeight nicht auf Ihrem html existieren undefined zurückkehren.

Zusätzlich zum Zweck der semantischen html, Ihr Label Tags benötigen ein separates Element zu Ihrem Eingang Tags sein, die auch einen Wert Attribut benötigen, so dass Sie und Laden, um etwas auf Ihrem js Ziel können zu überprüfen .

Ich habe den Code als ein Arbeitsbeispiel Targeting theAge und Das Gewicht Eingang Wert Attribute neu geschrieben, den p Tag Wrapper zu entfernen und das Formular eine id für den Ereignis-Listener geben:

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>

Arbeits js ist Link - https://jsbin.com/jiyibuwexi/edit?html,js

Quelle

2016-04-06 00:02:28

Event Handlers keine Warnungen (html, javascript)

Antwort

Verwandte Themen