javascript按钮onclick不会启动_Javascript_Html_Button_Onclick

javascript按钮onclick不会启动

javascript html button

javascript按钮onclick不会启动,javascript,html,button,onclick,Javascript,Html,Button,Onclick,所以我已经完成了这个简单的任务，但我不明白为什么这不起作用？同一个人能看到它并告诉我吗？我看到问题是按钮没有调用函数，但为什么 <html> <head> <title>Task count</title> <script> var over21 = 6.19; var under21 = 5.19; // Getting data from a user connect

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

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

您得到的HTML元素对象不是它们包含的值

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

在您试图获取的元素存在之前，getElementById调用正在运行

您可以将它们移动到函数内部，也可以移动到函数末尾的其他位置

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

在您试图获取的元素存在之前，正在运行getElementById调用

您可以将它们移动到函数内部，也可以移动到函数末尾的其他位置

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

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

移动：

进入我的功能

然后，您需要进行以下两项：

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

我们使用parseInt将值作为字符串并将其转换为整数值

由于年龄和小时现在在myFunction中定义，您需要将年龄传递给magic

致：

我相信你想要21小时以下和21小时以上。请注意，小时数现在也作为参数传入

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

移动：

进入我的功能

然后，您需要进行以下两项：

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

我们使用parseInt将值作为字符串并将其转换为整数值

由于年龄和小时现在在myFunction中定义，您需要将年龄传递给magic

致：

我相信你想要21小时以下和21小时以上。请注意，小时数现在也作为参数传入

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

您在加载dom之前访问它，并且只有一次，在需要时尝试分配变量。如果要将变量分配给dom对象而不是它们的值，请使用GetElementByIDMyColId.value 您没有将类型指定给button元素，不同的浏览器会为此属性指定不同的默认di。

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

设置年龄和小时变量的代码只运行一次，因此它们是这些文本框的空/默认值。您应该在函数范围之外声明它们，然后在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岁以上。我很确定您希望将小时数乘以21岁以下或21岁以上。

设置年龄和小时数变量的代码只运行一次，因此它们是这些文本框的空/默认值。您应该在函数范围之外声明它们，然后在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岁以上。我很确定你想把小时数乘以21小时以下或21小时以上。

给按钮一个类型？请提供javascript功能的完整上下文。。我们需要知道处理javascript时文档的状态。i、 DOM加载了吗？给按钮一个类型？请提供javascript功能的完整上下文。。我们需要知道处理javascript时文档的状态。i、 DOM加载了吗？在页面加载时，这也只发生一次，所以值总是空的，乘法的结果是NaN。在页面加载时，这也只发生一次，所以值总是空的，乘法的结果是NaN。thx很多！现在我明白了，我犯了多少愚蠢的错误，只是几个错误，不用担心。发生在我们所有人身上：太多了！现在我明白了，我犯了多少愚蠢的错误，只是几个错误，不用担心。发生在我们所有人身上：

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

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

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));                            
   };
};

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