javascript按钮onclick不会触发
[英]javascript button onclick doesn't fire
问题描述
So i have done this simple task but i don't see why this is not working? 
所以我已经完成了这个简单的任务，但是我不明白为什么这不起作用？ Can same one see it and tell me? 可以一个人告诉我吗？ I see that the problem is that button does not call out the function but why ? 我看到问题是按钮没有调出功能，但是为什么呢？
<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>
5 个解决方案
解决方案1
4 2012-10-22 19:46:52
var age = document.getElementById('age').value;
var hours = document.getElementById('hours').value;
You were getting HTML element object not the "value" they contained. 您正在获取HTML元素对象，而不是它们包含的“值”。
解决方案2
1 已采纳 2012-10-22 19:55:50
I would suggest not using so many global variables. 我建议不要使用太多的全局变量。
Move: 移动：
var age = document.getElementById('age');
var hours = document.getElementById('hours');
into myFunction() . 进入myFunction() 。
You'll then need to make those two: 然后，您需要进行以下两个操作：
var age = parseInt(document.getElementById('age').value);
var hours = parseInt(document.getElementById('hours').value);
We use parseInt to take the value as a string and turn it into an integer value. 我们使用parseInt将值作为字符串并将其转换为整数值。
Since age and hours are now defined in myFunction , you'll need to pass age to magic() 由于现在已经在myFunction定义了age和hours ，因此您需要将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!");
};
};
Also , if you want (1-150), you'll need to modify this if statement: 另外 ，如果需要（1-150），则需要修改以下if语句：
if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ ... }
to: 至：
if((hours <= 150 && hours > 0) && (age <= 150 && age > 12)){ ... }
Lastly , I believe the math may be incorrect in the magic() function: 最后 ，我相信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));
};
};
I believe you wanted hours*under21 and hours*over21 . 我相信您想要hours*under21和hours*over21 。 Note that hours is now also being passed in as a parameter. 请注意， hours数现在也已作为参数传递。
解决方案3
0 2012-10-22 19:47:37
The getElementById calls are being run before the elements you are trying to get even exist. 在试图使元素变得偶数存在之前，将运行getElementById调用。
You can either move them inside the function, or to another <script> at the end of the <body> . 您可以将它们移到函数内部，也可以移到<body>末尾的另一个<script>上。
Then, to access the value itself, use age.value and hours.value . 然后，要访问值本身，请使用age.value和hours.value 。 You should also run them through parseInt(...,10) to ensure they are numbers. 您还应该通过parseInt(...,10)运行它们parseInt(...,10)以确保它们是数字。
解决方案4
0
if that's the code i can spot 3 errors: 如果那是代码，我可以发现3个错误：
- you're accessing the dom before it's loaded and only once, try to assign the vars when you need them. 您需要在加载dom之前访问dom，并且只有一次，请在需要它们时尝试分配var。
- you're assigning the vars the dom object instead of their values, use getElementById("mycoolid").value 您要为vars分配dom对象而不是其值，请使用getElementById（“ mycoolid”）。value
- you're not assigning the type to the button element, different browser assign different default di this attribute. 您没有将类型分配给按钮元素，不同的浏览器为此属性分配了不同的默认值。
解决方案5
0 2012-10-22 20:02:12
Your code that sets your age and hours variables is only run once, thus they are the empty/default values for those text boxes. 设置年龄和小时数变量的代码仅运行一次，因此它们是这些文本框的空/默认值。 You should declare them outside the scope of a function, but then re-set them inside the "myFunction" function. 您应该在函数范围之外声明它们，然后在“ myFunction”函数中重新设置它们。 Alternatively, you could only declare/set them in the "myFunction" function, then pass them to the "magic" function as parameters. 另外，您只能在“ myFunction”函数中声明/设置它们，然后将它们作为参数传递给“ magic”函数。 In the end, your script should look something like this though: 最后，您的脚本应如下所示：
<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>
As an additional note, you're multiplying age by under21 or over21. 请注意，年龄乘以21岁以下或21岁以上。 I'm pretty sure you want to multiply hours by under21 or over21 instead. 我很确定您希望将小时数乘以under21或over21。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.