onClick从按钮到功能

时间：2015-03-16 03:35:19

标签： javascript html onclick

这是一项正在进行的工作（计算器和其他一些东西），但我现在要做的是每当你在计算器的结果中键入一些数字时，你按“+” onclick将调用checkValidity，它将确定您输入的内容是整数还是非整数。它会发送一个整数或不整数的警报。我的问题是onclick不会做任何事情。我尝试清除除了警报（“测试”）之外的所有内容的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>

2 个答案:

答案 0 :(得分：0)

尝试这样做有效

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

答案 1 :(得分：0)

您犯了一些小错误导致您的代码无效 我将在工作示例：

之后解释它们

＆＃13;
＆＃13; 
function validate() {
    if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
        alert("Integer!");
    } else {
        alert("Not an integer, press C");
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13; （小提琴：http://jsfiddle.net/z8umk2c6/6/ ）

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


以及其他一些可能会或可能不会破坏代码的错误，但这些错误的做法并非如此：

  • OnClick应为onclick（全部小写）。同样适用于Name和Value。
  • 有些<input>是用大写字母写的：<Input>。
  • <br>和<input>需要自己的结束标记，如下所示：<br />和<input />
相关问题
最新问题