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

Source

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类的按钮会将速度设置为新值，并禁用所有set-speed按钮。单击reset按钮将重新启用它们。

代码应该是相当自我解释的。

Javascript：点击按钮更改变量

5 个答案: