事件处理程序未抛出警报(html、JavaScript)

我正在尝试学习html中的简单事件处理。我创建了一些需要输入数据的字段。正如你从代码中看到的，我的意图是将数字限制在一定范围内。出于某种原因，当我输入超出这些范围的值时，我的警报不会响起。如果有人能引导我朝着正确的方向前进，那就太好了。

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;

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表单元素！==他们的价值观。

您拥有的函数不会被调用。第二个js文件上的chkAge和chkWeight需要（）。

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

你也可以用一个按钮调用函数来测试

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

提交表单时，表单上没有点击事件，因此函数从未被调用。。此外，当使用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>

要在提交时测试两个输入框的值，首先需要将这些框的值存储在js上，这样条件语句就可以进行检查。您正试图使用Age和Weight变量执行此操作，但由于id选择器chkAgehkWeight

此外，出于语义html的目的，标签标记需要是输入标签的独立元素，这些标签还需要值属性，这样您就可以在js上定位并存储一些内容进行检查。

我已经重写了您的代码，作为一个针对age和Weight输入值属性的工作示例，删除p标记包装器，并为事件侦听器为表单提供id：

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>

工作js-bin链接-https://jsbin.com/jiyibuwexi/edit?html，js

相关内容

最新更新

热门标签：