Обработчики событий не бросают предупреждения (html, javascript)

Я пытаюсь изучить простую обработку событий в html. Я создал несколько полей, которым нужны данные. Как вы можете видеть из кода, мое намерение состоит в том, что числа ограничены определенным диапазоном. По какой-то причине, когда я вводил значения за пределами этих диапазонов, мои предупреждения не исчезают. Если бы кто-нибудь мог направить меня в правильном направлении, это было бы здорово.Обработчики событий не бросают предупреждения (html, javascript)

HTML файла:

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

первый JS файл:

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

второй JS файл:

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

источник

2016-04-05 Aaron Ratliffe

Ваша форма html даже не активизирована, чтобы запустить ваши функции? –

Я понимаю, что вы сейчас имеете в виду. Я следовал примеру из старого учебника и не понимал роли действия формы. Это где они всегда будут уволены? –

см. Мой ответ, я исправил его для вас –

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

Проверьте, если это поможет. http://www.w3schools.com/jsref/prop_text_value.asp также, проверьте этот учебник.
Элементы формы DOM! == их значения.

источник

2016-04-05 23:22:45 IdeaMan

Вы не имели событие нажатия кнопки мыши на вашу форму, когда он был представлен таким образом ваши функции никогда не будут вызваны .. Кроме того, при получении значения с помощью Javascript вы должны использовать .value элемент .. попробуй ниже:

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>

источник

2016-04-05 23:24:34

Я запустил фрагмент кода, а также скорректировал свой код в соответствии с вашим. По какой-то причине предупреждение бросается каждый раз сейчас. –

он не пытается еще раз .. если я вхожу, скажу 25 в возрасте и 834231 в весе по возрасту, только предупреждение о весе покажет и т. Д., Так работает, как вы бы этого хотели ... –

функции вы не вызывается. chkAge и chkWeight во втором файле js file().

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

Вы также можете просто вызвать функцию с помощью кнопки, чтобы проверить их

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

источник

2016-04-05 23:28:46

Чтобы проверить значение ваших двух полей ввода на отправить вам в первую очередь необходимо, чтобы сохранить ценность этих коробок на js, поэтому ваши условные операторы должны что-то проверить. Вы пытаетесь сделать это с вашим theAge и theWeight переменные, однако эти возвращения не определено, как селектор идентификатора chkAge и chkWeight не существует на вашем HTML.

Кроме того, для целей семантического HTML, ваш ярлыка меток должны быть отдельным элементом для вашего ввода тегов, которые также необходимы значением атрибута, так что вы можете ориентировать и хранить что-то на ваши JS, чтобы проверить ,

Я переписать свой код в качестве рабочего примера таргетирования theAge и theWeight ввода значение атрибутов, удаление р тег обертки и давая вашу форму в идентификатор для слушателя событий:

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>

РАБОЧАЯ бен ссылка расслоение плотной - https://jsbin.com/jiyibuwexi/edit?html,js

источник

2016-04-06 00:02:28

Обработчики событий не бросают предупреждения (html, javascript)

ответ

Смежные вопросы