將按鈕綁定到Javascript案例/動作

我是JavaScript新手，遇到一些大問題。我有一些功能，我可以在文本框中輸入並按下回車鍵，這些功能就可以工作。但我已經創建了4個按鈕，我想要連接到動作..我有4個動作：「上」，「下」，「左」和「右」。將按鈕綁定到Javascript案例/動作

這是爵士小提琴在我的代碼：http://jsfiddle.net/n24gQ/

我做了這樣的按鈕，但我不知道該怎麼的OnClick標籤內寫？

<div id="gamebuttons"> 
    <button id="up" button onClick="">UP</button> 
    <button id="down" button onClick="">DOWN</button> 
    <button id="left" button onClick="">LEFT</button> 
    <button id="right" button onClick="">RIGHT</button> 
    </div>

我希望你能理解我的問題是什麼。我做了4個JavaScript案件，我想綁定到4個HTML按鈕，如果可能的話.. :)這是案件：「frem」「tilbage」「hoejre」和「venstre」我需要綁定..抱歉不是代碼中的一切是英語，但它應該是可以理解的..

來源

2014-03-13 user3414678

您可以將箭頭鍵綁定到一個javascript函數 [HTTP：//計算器。COM /問題/ 1402698 /結合-箭頭鍵合JS-的jquery] [1] [1]：http://stackoverflow.com/questions/1402698/binding-arrow-keys-in -js-jquery –

Fiddle

你可以簡單的寫你的按鈕定義爲onclick屬性，如函數名像這樣：

<button id="up" type="button" onclick="alert('UP'); return false;">UP</button>

然而，當你的按鈕已經有ID的，你也可以檢查是否得到了單擊這些ID的之一，而無需在標記的需要的onclick：

的JavaScript：

var buttonUp = document.getElementById('up'); 
buttonUp.onclick = function() { myFunction(); return false; }

的jQuery：

$('#up').on('click', myFunction());

來源

2014-03-13 10:04:18 CREE7EN

這確實很有意義，但我無法真正實現它的工作..我有一個文本字段，我可以寫一些命令並按回車。然後這些命令正常工作。但不是寫作，我只想推一個按鈕，然後命令案例運行..不知道它有任何意義tho，但一切都在第一篇文章中的js小提琴..感謝您的時間！ – user3414678

請路過的OnClick標籤

例如，如果要關聯瑣事功能DOWN按鈕寫裏面的函數名

<button id="down" onclick="playGame();">DOWN</button>

來源

2014-03-13 10:05:59

這是行不通的..我認爲它有點關鍵是劑量知道文本輸入..正如你可以在這裏看到我希望：function playGame（） { //獲取玩家的輸入並將其轉換爲小寫 playersInput = input.value; playersInput = playersInput.toLowerCase（）; – user3414678

而不是使用內嵌處理器（不好的做法）或每個按鈕的多個處理程序，我會使用您的按鈕包裝上的事件委託，就像這樣

$('#gamebuttons').on('click', 'button', function() { 

    /* get the id attribute of the clicked button */ 
    var button_id = this.id; 

    case (button_id) { 

     "UP" : /* code for up button */ break; 
     "DOWN" : /* code for down button */ break; 
     "LEFT" : /* code for left button */ break; 
     "RIGHT" : /* code for right button */ break; 

    } 
});

來源

2014-03-13 10:08:25 fcalderan

我想這是要走的路，不知道你可以這樣做。 – CREE7EN

這看起來不錯，但我應該把它放在哪裏？這是JQuery代碼吧？現在我有一個textfield，我可以輸入一些命令。但因爲我只有4個命令，它們都是向上，向下，向左和向右，我想將它們綁定到一個按鈕上。 – user3414678

我認爲這些改變會給你解決方案。而不是第一個按鈕，您需要將事件綁定到所需的所有按鈕。目前，querySelector()只獲取第一個按鈕來綁定事件。因此，使用querySelectorAll()

替換此代碼

var button = document.querySelector("button"); 
button.style.cursor = "pointer"; 
button.addEventListener("click", clickHandler, false); 
button.addEventListener("mousedown", mousedownHandler, false); 
button.addEventListener("mouseout", mouseoutHandler, false);

下面的代碼

var gamebuttonslist=document.querySelectorAll("#gamebuttons button"); 
for (var vitem=0;vitem<gamebuttonslist.length;vitem++) { 
    if (typeof gamebuttonslist[vitem] != "undefined" && gamebuttonslist[vitem] != null) { 
     gamebuttonslist[vitem].style.cursor = "pointer"; 
     gamebuttonslist[vitem].addEventListener("click", clickHandler, false); 
     gamebuttonslist[vitem].addEventListener("mousedown", mousedownHandler, false); 
     gamebuttonslist[vitem].addEventListener("mouseout", mouseoutHandler, false); 
    } 
}

來源

2015-11-28 06:17:46

將按鈕綁定到Javascript案例/動作

回答

相關問題