事件处理程序不抛出警报（html、JavaScript）答案

【问题标题】：Event Handlers not throwing alerts (html, JavaScript)事件处理程序不抛出警报（html、JavaScript）
【发布时间】：2016-04-05 23:18:58
【问题描述】：

我正在尝试学习 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;

【问题讨论】：

你的 html 表单甚至没有任何动作来触发你的函数？
我明白你的意思了。我从一本旧教科书上学了一个例子，并没有意识到形式动作的作用。那是他们将永远被解雇的地方吗？
看我的回答我已经为你修好了
嗯，你有多个错误，但都在 cmets 中解决了。全部检查！

标签： javascript html event-handling dom-events

【解决方案1】：

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

【讨论】：

【解决方案2】：

您拥有的函数没有被调用。第二个js文件需要chkAge和chkWeight()。

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

您也可以通过按钮调用函数来测试它们

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

【讨论】：

【解决方案3】：

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

【讨论】：

我运行了代码 sn-p 并调整了我的代码以匹配您的代码。由于某种原因，现在每次都会抛出警报。
它不会再试一次..如果我输入年龄为 25 岁，体重为 834231 岁时，只有体重警报会显示等..所以你也想要它...

【解决方案4】：

要在提交时测试两个输入框的值，您首先需要将这些框的值存储在 js 中，以便您的条件语句可以检查。您正在尝试使用 theAge 和 theWeight 变量执行此操作，但是这些变量返回未定义为 id 选择器 chkAge 和 chkWeight 在您的 html 中不存在。

除了语义 html 的目的，你的 label 标签需要是一个单独的元素到你的 input 标签也需要一个 value 属性，这样你就可以在你的 js 上定位和存储一些东西来检查。

我已将您的代码重写为针对 theAge 和 theWeight 输入 value 属性的工作示例，删除 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

【讨论】：