Javascriptを：ボタンのクリック

Question

に変更する変数、私は以下のようにindex.htmlをするためにリンクされたJavaScriptファイルがあります：いくつかの他のコンテンツと一緒に

var speed = ...; 

を：

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

はgame.jsが含まれているとします。

HTMLページに3つのボタンがあり、クリックするとJavaScriptの変数speedが変更されます。クリックすると、リセットボタンがクリックされるまで3つすべてのボタンを無効にするか非表示にします。私はこれについてどのような考え方？

Answer 1

各ボタンのclickイベントにアタッチするjavascriptファイル内に関数を作成します。

この関数は、必要な変数を変更します。

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

Answer 2

最も簡単な方法として、jQueryを使用します。

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

それともイベントを登録できます。

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

Source

Answer 3

は、あなたのJavascriptファイルに次のように含める：あなたのHTMLで

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

、以下の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 4

このようなものはありますか？ http://jsfiddle.net/qMRmn/

は基本的には、speedはグローバル変数であり、クラスset-speedクラスでボタンをクリックすると、新しい値に速度を設定し、set-speedすべてのボタンが無効になります。 resetボタンをクリックすると、再度有効になります。

コードはかなり自明です。純粋なHTML/JavaScriptを使用して

Answer 5

は、ここで私はどうなるのかです：ここでは

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

は実施例である：私はその大学割り当てjQueryのためとしてのjQueryを使用しカント明記の必要がありますhttp://jsfiddle.net/maerics/TnTuD/