onClick 从按钮到函数

Question

这是一项正在进行的工作（计算器和其他一些东西），但我现在正在尝试做的是每当您在计算器的结果中输入一些数字，然后按“+ " onclick 将调用 checkValidity 来确定您输入的内容是整数还是非整数。它会发送一个警告说整数或不是整数。我的问题是 onclick 不会执行任何操作。我尝试清空除 alert("test); 之外的所有功能的 checkValidity 功能，但它仍然无法正常工作。有人可以解释一下我做错了什么吗？

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript>">
         function checkValidity()
         {
            var Calculator = document.getElementById("Calculator")
         if (Calculator.Result.value === parseInt(test, 10))
            {
            alert("Integer!");
            }
            else
            {
            alert("Not an integer, press C");
            }
         }
      </script>
      <form name="Calculator">
         First name:
            <br>
               <input type="text" name="firstname">
            <br>
         Last name:
            <br>
               <input type="text" name="lastname">
            <br>
         Student ID:
            <br>
               <input type="text" name="ID">
            <br>
         Biography:
            <br>
               <textarea maxlength=30 rows="2" cols="30">
               </textarea>
            <br>
         Result:
         <table border="1" style="width:100%">
            <input type="text" name="Result" size="12">
            <tr>
               <td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
               <td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
               <td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
               <td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
            </tr>
            <tr>
               <td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
               <td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
               <td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
               <td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
            </tr>
            <tr>
               <td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
               <td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
               <td><Input type="button" Name="plus" Value="+" OnClick="checkValidity()"></td>
               <td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
            </tr>      
            <tr>
               <td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
               <td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
               <td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
               <td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
            </tr>
         </table>
         <span id="HoursWorkedThisWeek"></span>
         <Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
         <Input type="button" Name="Submit" Value="Submit">
      </form>
   </head>
</html>

Answer 1

尝试一下它有效

  <!DOCTYPE html>
<html>
   <head>


   </head>
   <body>
    <form id="Calculator" name="Calculator">
         First name:
            <br>
               <input type="text" name="firstname">
            <br>
         Last name:
            <br>
               <input type="text" name="lastname">
            <br>
         Student ID:
            <br>
               <input type="text" name="ID">
            <br>
         Biography:
            <br>
               <textarea maxlength=30 rows="2" cols="30">
               </textarea>
            <br>
         Result:
         <table border="1" style="width:100%">
            <input type="text" name="Result" size="12">
            <tr>
               <td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
               <td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
               <td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
               <td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
            </tr>
            <tr>
               <td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
               <td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
               <td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
               <td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
            </tr>
            <tr>
               <td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
               <td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
               <td><Input type="button" Name="plus" Value="+" OnClick="checkValid()"></td>
               <td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
            </tr>      
            <tr>
               <td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
               <td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
               <td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
               <td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
            </tr>
         </table>
         <span id="HoursWorkedThisWeek"></span>
         <Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
         <Input type="button" Name="Submit" Value="Submit">
      </form>
        <script type="text/JavaScript">
         function checkValid()
         {           
            var Calculator = document.getElementById("Calculator")
            var test =Calculator[4].value;
         if (parseInt(Calculator[4].value) === parseInt(test, 10))
            {
            alert("Integer!");
            }
            else
            {
            alert("Not an integer, press C");
            }
         }
      </script>
   </body>
</html>

Answer 2

您犯了一些小错误，导致您的代码无法运行。
我将在这个 工作示例:

之后解释它们

function validate() {
    if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
        alert("Integer!");
    } else {
        alert("Not an integer, press C");
    }
}

<body>
    <form name="Calculator">
        First name: <br /><input type="text" name="firstname" /><br />
        Last name: <br /><input type="text" name="lastname" /><br />
        Student ID: <br /><input type="text" name="ID" /><br />
        Biography: <br /><textarea maxlength=30 rows="2" cols="30"></textarea><br />
        Result:
        <table border="1" style="width:100%;">
            <input type="text" name="Result" size="12" />
            <tr>
                <td><input type="button" name="zero" value="0" onclick="Calculator.Result.value += '0'" /> </td>
                <td><input type="button" name="one" value="1" onclick="Calculator.Result.value += '1'" /></td>
                <td><input type="button" name="two" value="2" onclick="Calculator.Result.value += '2'" /></td>
                <td><input type="button" name="three" value="3" onclick="Calculator.Result.value += '3'" /></td>
            </tr>
            <tr>
                <td><input type="button" name="four" value="4" onclick="Calculator.Result.value += '4'" /></td>
                <td><input type="button" name="five" value="5" onclick="Calculator.Result.value += '5'" /></td>
                <td><input type="button" name="six" value="6" onclick="Calculator.Result.value += '6'" /></td>
                <td><input type="button" name="seven" value="7" onclick="Calculator.Result.value += '7'" /></td>
            </tr>
            <tr>
                <td><input type="button" name="eight" value="8" onclick="Calculator.Result.value += '8'" /></td>
                <td><input type="button" name="nine" value="9" onclick="Calculator.Result.value += '9'" /></td>
                <td><input type="button" name="plus" value="+" onclick="validate()" /></td>
                <td><input type="button" name="minus" value="-" onclick="Calculator.Result.value += '-'" /></td>
            </tr>      
            <tr>
                <td><input type="button" name="equals" value="=" onclick="Calculator.Result.value = eval(Calculator.Result.value)" /></td>
                <td><input type="button" name="divide" value="/" onclick="Calculator.Result.value += '/'" /></td>
                <td><input type="button" name="multiply" value="*" onclick="Calculator.Result.value += '*'" /></td>
                <td><input type="button" name="clear" value="C" onclick="Calculator.Result.value = ''" /></td>
            </tr>
        </table>
        
        <span id="HoursWorkedThisWeek"></span>
        <input type="button" name="Save" value="Save" onclick="Calculator.HoursWorkedThisWeek = Calculator.Result.value" />
        <input type="button" name="Submit" value="Submit" />
    </form>
</body>

(fiddle: http://jsfiddle.net/z8umk2c6/6/)

您的所有元素都在 <head> 标签中。只有 <script> 应该在头部内（或者更好的是，在单独的 JS 文件中），所有 HTML 元素应该在 <body> 标签内。
您的表单没有 id，只有 name。因此变量 Calculator （变量名使用大写字母的坏习惯）没有任何意义。在您的情况下，您甚至不需要该变量，因为您只需直接按名称访问表单，所以我在函数开头删除了该变量。
（我建议使用 ID 而不是名称，但这可能只是个人喜好。）
if 子句中的 === 不起作用，它太严格了。 == 但是会起作用。
"test" 什么都没有，它没有任何价值。我重写了 if 子句，以便根据自身的整数值检查该值。如果该整数值等于原始值，则您知道原始值已经是一个整数。

还有一些其他错误可能会破坏代码，也可能不会破坏代码，但仍然是不好的做法：

OnClick 应该是 onclick（全部小写）。 Name 和 Value.
有些<input>是大写的：<Input>。
<br> 和 <input> 需要它们自己的结束标签，例如：<br /> 和 <input />

onClick 从按钮到函数

onClick from button to function

html

javascript

onclick