我是JS的初学者,我想进行基本的HTML和JS验证。如何用2个输入(数字和提交)来完成?
var edad = document.getElementById("edad"),
numero = edad.numero
function validacion(){
if (numero >= 18) {
alert("eres mayor de edad");
} else {
alert("eres menor de edad");
}
}
edad.addEventListener("submit", validacion);
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="edad">
<input type="number" name="numero" class="numero">
<input type="submit" name="btn" value="enviar" class="btn">
<script type="text/javascript" src="1.js"></script>
</div>
</body>
</html>
最佳答案
您正在submit
上设置一个事件监听器,该监听器指向div
,但是div
没有submit
事件。
另外,您需要获取value
的input
并进行比较,而不是input
元素本身。
另外,edad.numero
不是访问input
元素的正确方法。
最后,从HTML到JavaScript的所有数据都是字符串,因此您需要将其转换为数字以对其进行数学运算。
如果在form
元素上设置有效的侦听器,并引用input
正确性,则代码将触发:
var edad = document.getElementById("edad");
var numero = document.querySelector("input[name='numero']");
function validacion(event){
event.preventDefault(); // prevents the form from submitting
// The + converts the string to a number
// And, you must get the value of the input, not the input itself
if (+numero.value >= 18) {
alert("eres mayor de edad");
} else {
alert("eres menor de edad");
}
}
edad.addEventListener("submit", validacion);
<form id="edad">
<input type="number" name="numero" class="numero">
<input type="submit" name="btn" value="enviar" class="btn">
</form>