Javascript 变量随 onclick 变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6877826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript variable change with onclick
提问by user868443
I want to have a variable changed within a checkbox that causes an if statement to compute without reloading the page, but I'm struggling... still learning, sorry!
我想在复选框中更改一个变量，该变量会导致 if 语句在不重新加载页面的情况下进行计算，但我正在努力……仍在学习，抱歉！
Here's the relevant code:
这是相关的代码：
<!--Variable declaration-->
<script type="text/javascript"> var lettuce = false; </script>
<!--The following line is within a form-->
<input type="checkbox" onclick="lettuce=true" name="food" value="lettuce" /> Lettuce<br />
<--the if statement-->
<script type="text/javascript">
if (lettuce == true) {
document.write("45");
}
</script>
Thanks!
谢谢！
回答by Evan Mulawski
<input type="checkbox" onchange="lettuce=this.checked; recompute();" name="food" value="lettuce" /> Lettuce<br />
<script type="text/javascript">
function recompute()
if (lettuce == true) {
document.write("45");
}
}
</script>
First, you want the onchangeevent, which is called when the state of the checkbox changes. The this.checkedreturns the boolean value (true or false) depending on that state. Second, the ifstatement is only processed once, when the page loads that script. Place it in a function to call it again.
首先，您需要onchange事件，当复选框的状态改变时调用该事件。根据该状态this.checked返回布尔值（真或假）。其次，该if语句仅在页面加载该脚本时处理一次。将它放在一个函数中以再次调用它。
回答by tskuzzy
Wrap the if statement into a function and then call the function in the onclick event.
将 if 语句包装成一个函数，然后在 onclick 事件中调用该函数。
<!--Variable declaration-->
<script type="text/javascript"> var lettuce = false; </script>
<!--The following line is within a form-->
<input type="checkbox" onclick="my_function();" name="food" value="lettuce" /> Lettuce<br />
<!--the if statement-->
<script type="text/javascript">
function my_function() {
if (lettuce == true) {
lettuce = false;
} else {
lettuce = true;
document.write("45");
}
}
</script>
回答by AlienWebguy
First, your logic will never set lettuce to false. I understand that we should eat more lettuce, but we should still give the user a choice ;)
首先，您的逻辑永远不会将 lettuce 设置为 false。我明白我们应该多吃生菜，但我们仍然应该给用户一个选择；)
Secondly, try to keep your Javascript out of the html:
其次，尽量让你的 Javascript 远离 html：
<!--Variable declaration-->
<script type="text/javascript"> var lettuce = false; </script>
<!--The following line is within a form-->
<input type="checkbox" id="lettuce" name="food" value="lettuce" /> Lettuce<br />
<script type="text/javascript">
document.getElementById('lettuce').addEventListener('click',checkLettuce,false);
function checkLettuce(){
if (document.getElementById('lettuce').checked === true) {
lettuce = true;
document.write("45");
}
else
{
lettuce = false;
}
}
</script>
Working demo: http://jsfiddle.net/AlienWebguy/renut/
回答by Paul
You need to call a function in your onclick, because the script you have now:
您需要在 onclick 中调用一个函数，因为您现在拥有的脚本：
if(lettuce == true){
document.write("45");
}
Executes before your onclick ever occurs.
在您的 onclick 发生之前执行。
Try this:
尝试这个：
<!--The following line is within a form-->
<input type="checkbox" onclick="clicked(true);" name="food" value="Lettuce" /> Lettuce<br />
<input type="checkbox" onclick="clicked(false);" name="food" value="Carrot" /> Carrot<br />
<input type="checkbox" onclick="clicked(false);" name="food" value="Cool Beans" /> Cool Beans<br />
<input type="checkbox" onclick="clicked(false);" name="food" value="Pepper" /> Pepper<br />
<--the if statement-->
<script type="text/javascript">
function clicked(lettuce){
if(lettuce)
alert('You toggled Lettuce!');
else
alert('You toggled some other vegetable!');
}
</script>
回答by EJay
Setting lettuce=truewont cause your if statement to run. You just need to write a function that will run when your checkbox is clicked.
设置lettuce=true不会导致您的 if 语句运行。您只需要编写一个在单击复选框时将运行的函数。
<input type="checkbox" onclick="functionName()".../>Lettuce</br/>
<script type="text/javascript">
function functionName(){
document.write("45");
}
</script>
functionName() is called when the check box is clicked.
functionName() 在复选框被点击时被调用。
回答by Kenneth J
Seeing javascript functions being invoked inline from an html element makes me cringe a little.
看到从 html 元素内联调用 javascript 函数让我有点畏缩。
<input type="checkbox" id="chkLettuce" name="food" value="lettuce" /> Lettuce<br />
<--the if statement-->
<script type="text/javascript">
var chkLettuce = document.getElementById("chkLettuce");
chkLettuce.onclick = chkLettuce.click = function() {
lettuce = !!chkLettuce.checked;
if(lettuce){
alert('45 or whatever');
}
}
</script>
