Javascript：单击按钮时更改变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5557302/
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: Changing variable on button click
提问by Mark
I have a javascript file linked to index.html like below:
我有一个链接到 index.html 的 javascript 文件，如下所示：
<script src='game.js' type='text/javascript'>
</script>
Assume that game.jscontains:
假设game.js包含：
var speed = ...;
Along with some other content.
连同其他一些内容。
I have 3 buttons on the HTML page that when clicked I want to change the variable speedin the javascript. Once clicked I want all 3 buttons to be disabled or hidden until the reset button is clicked. Any idea how I go about this?
我在 HTML 页面上有 3 个按钮，单击时我想更改speedjavascript 中的变量。单击后，我希望禁用或隐藏所有 3 个按钮，直到单击重置按钮。知道我该怎么做吗？
回答by maerics
Using pure HTML/JavaScript, here's what I would do:
使用纯 HTML/JavaScript，这是我要做的：
<form name="form1">
<span id="buttons">
<input type="button" name="button1" value="Speed1"/>
<input type="button" name="button2" value="Speed2"/>
<input type="button" name="button3" value="Speed3"/>
</span>
<input name="reset" type="reset"/>
</form>
<script type="text/javascript">
var speed, buttonsDiv=document.getElementById("buttons");
for (var i=1; i<=3; i++) {
var button = document.form1["button" + i];
button.onclick = function() {
speed = this.value;
alert("OK: speed=" + speed);
buttonsDiv.style.display = 'none';
};
}
document.form1.reset.onclick = function() {
speed = null;
alert("Speed reset!");
buttonsDiv.style.display = 'inline';
return true;
};
</script>
Here is a working example: http://jsfiddle.net/maerics/TnTuD/
这是一个工作示例：http: //jsfiddle.net/maerics/TnTuD/
回答by Oded
Create functions within your javascript files that attach to the clickevents of each button.
在您的 javascript 文件中创建附加到click每个按钮事件的函数。
The functions would change the variable you want.
这些函数会改变你想要的变量。
aButtonelement.addEventListener('click',functionToChangeVariable,false)
回答by beatgammit
回答by NakedBrunch
Include the following in your Javascript file:
在您的 Javascript 文件中包含以下内容：
function DisableButtons() {
speed = 100;
document.getElementById("btn_1").disabled = true;
document.getElementById("btn_2").disabled = true;
document.getElementById("btn_3").disabled = true;
}
function EnableButtons() {
document.getElementById("btn_1").disabled = false;
document.getElementById("btn_2").disabled = false;
document.getElementById("btn_3").disabled = false;
}
In your HTML, assign the following onClick events:
在您的 HTML 中，分配以下 onClick 事件：
<button onClick="DisableButtons();">Button 1</button>
<button onClick="DisableButtons();">Button 2</button>
<button onClick="DisableButtons();">Button 3</button>
<button onClick="EnableButtons();">Reset</button>
回答by matt
something like this? http://jsfiddle.net/qMRmn/
像这样的东西？http://jsfiddle.net/qMRmn/
Basically, speedis a global variable, and clicking a button with the class set-speedclass will set the speed to a new value, and disable all of the set-speedbuttons. Clicking the resetbutton will re-enable them.
基本上，speed是一个全局变量，单击具有类set-speed类的按钮会将速度设置为新值，并禁用所有set-speed按钮。单击该reset按钮将重新启用它们。
The code should be fairly self explanatory.
代码应该是不言自明的。
