javascript按钮onclick不会触发答案

【问题标题】：javascript button onclick doesn't firejavascript按钮onclick不会触发
【发布时间】：2012-10-22 19:44:43
【问题描述】：

所以我已经完成了这个简单的任务，但我不明白为什么这不起作用？同一个人可以看到并告诉我吗？我看到问题是按钮没有调出功能，但为什么？

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // Getting data from a user connecting variables with textboxes by ID
        var age = document.getElementById('age');
        var hours = document.getElementById('hours');

        // function wich does all of the calculation
        function magic(){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic();
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>

【问题讨论】：

给按钮一个类型？ <button type="button" onclick="myFunction()" ></button>
请提供 javascript 功能的完整上下文。在处理 javascript 时，我们需要知道文档的状态。即.. DOM 加载了吗？

标签： javascript html button onclick

【解决方案1】：

var age = document.getElementById('age').value;
var hours = document.getElementById('hours').value;

你得到的是 HTML 元素对象，而不是它们包含的“值”。

【讨论】：

这也只发生一次，在页面加载时，所以值总是空白，乘法的结果是 NaN。

【解决方案2】：

我建议不要使用这么多的全局变量。

移动：

var age = document.getElementById('age');
var hours = document.getElementById('hours');

进入myFunction()。

然后你需要做这两个：

var age = parseInt(document.getElementById('age').value);
var hours = parseInt(document.getElementById('hours').value);

我们使用parseInt将值作为一个字符串，并把它变成一个整数值。

由于age 和hours 现在在myFunction 中定义，您需要将age 传递给magic()

    var over21 = 6.19;
    var under21 = 5.19;

    // function wich does all of the calculation
    function magic(age){

      //cheking if he is under or over 21 
       if(age < 21){
             alert("You will make " + (age*under21));
       }else{
             alert("You will make " + (age*over21));                            
       };
    };
    // function that does everything and is connected to the button
    function myFunction(){

    var age = parseInt(document.getElementById('age').value);
    var hours = parseInt(document.getElementById('hours').value);
     // Validation checking that entered number is not more than 150 // And also if age is correct
     console.log(age + " : " + hours)   
        if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
           magic(age);
        }else{
            alert("Wrong!");
        };
    };

另外，如果你想要（1-150），你需要修改这个if声明：

if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ ... }

到：

if((hours <= 150 && hours > 0) && (age <= 150 && age > 12)){ ... }

最后，我认为magic() 函数中的数学运算可能不正确：

function magic(age, hours){

  //cheking if he is under or over 21 
   if(age < 21){
         alert("You will make " + (hours*under21));
   }else{
         alert("You will make " + (hours*over21));                            
   };
};

我相信你想要hours*under21 和hours*over21。请注意，hours 现在也作为参数传入。

EXAMPLE

【讨论】：

非常感谢！现在我知道我做了多少愚蠢的东西）））
只是一些错误，不用担心。发生在我们所有人身上:)

【解决方案3】：

getElementById 调用在您尝试获取的元素甚至存在之前运行。

您可以将它们移动到函数内部，也可以将它们移动到 <body> 末尾的另一个 <script>。

然后，要访问值本身，请使用age.value 和hours.value。您还应该通过parseInt(...,10) 运行它们以确保它们是数字。

【讨论】：

【解决方案4】：

如果这是我可以发现 3 个错误的代码：

您在加载 dom 之前访问它，并且只访问一次，请尝试在需要时分配 var。
您正在为 var 分配 dom 对象而不是它们的值，请使用 getElementById("mycoolid").value
您没有将类型分配给按钮元素，不同的浏览器分配了不同的默认 di 这个属性。

【讨论】：

【解决方案5】：

设置年龄和小时变量的代码只运行一次，因此它们是这些文本框的空值/默认值。您应该在函数范围之外声明它们，然后在“myFunction”函数中重新设置它们。或者，您只能在“myFunction”函数中声明/设置它们，然后将它们作为参数传递给“magic”函数。最后，您的脚本应该看起来像这样：

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // function wich does all of the calculation
        function magic(age, hours){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Getting data from a user connecting variables with textboxes by ID
            var age = document.getElementById('age').value;
            var hours = document.getElementById('hours').value;

            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic(age, hours);
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>

作为附加说明，您将年龄乘以 21 岁以下或 21 岁以上。我很确定您希望将小时数乘以 under21 或 over21。

【讨论】：