on单击从按钮到功能

onClick from button to function

本文关键字：功能 按钮 单击 on      更新时间：2023-09-26
这是一项

正在进行的工作（计算器和其他一些东西），但我现在要做的是，每当你在计算器的结果中输入一些数字，然后你按"+"，onclick将调用checkValid，这将确定你输入的内容是整数还是不是整数。它将发送一个警报，指出整数或不是整数。我的问题是点击不会做任何事情。我尝试清空除警报（"测试"）之外的所有内容的检查有效性函数;它仍然不起作用。有人可以解释一下我做错了什么吗？

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

试试这个它有效

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

你犯了一些小错误，导致你的代码无法工作。
我将在这个工作示例之后解释它们：

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>
（小提琴：http://jsfiddle.net/z8umk2c6/6/）

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


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

  • OnClick应onclick（全部小写）。Name和Value也是如此.
  • 有些<input>是用大写字母写的：<Input> .
  • <br>和<input>需要自己的结束标签，如下所示：<br />和<input />
相关文章：