Javascript：單擊按鈕時更改變量

Question

我有一個鏈接到index.html的javascript文件，如下所示：

<script src='game.js' type='text/javascript'>
</script>

假設game.js包含：

 var speed = ...;

以及其他一些內容。

我在HTML頁面上有3個按鈕，單擊這些按鈕時，我想更改javascript中的可變speed 。 單擊后，我希望禁用或隱藏所有3個按鈕，直到單擊“重置”按鈕為止。 知道我該怎么做嗎？

Answer 1

使用純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>

這是一個工作示例： http : //jsfiddle.net/maerics/TnTuD/

Answer 2

在JavaScript文件中創建附加到每個按鈕的click事件的函數。

函數將更改所需的變量。

aButtonelement.addEventListener('click',functionToChangeVariable,false)

Answer 3

最簡單的方法，使用jQuery。

$("#idofbutton").click(function () {
    // change variables here
});

或者您可以注冊一個事件：

document.getElementById("idofbutton").addEventListener('click', function () {
    // change variables here
}, false);

資源

Answer 4

在您的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;
}

在您的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>

Answer 5

這樣的東西？ http://jsfiddle.net/qMRmn/

基本上， speed是一個全局變量，單擊具有set-speed class類的按鈕會將速度設置為新值，並禁用所有set-speed按鈕。 單擊reset按鈕將重新啟用它們。

該代碼應該是相當自我解釋的。