如何選擇一個數組的多個html元素並將它們全部設置爲一個函數？

我做了一個簡單的捶鼴鼠遊戲的一種香草JavaScript和HTML，所以我用9個按鈕元素組成的數組：如何選擇一個數組的多個html元素並將它們全部設置爲一個函數？

var buttons = [button1, button2, button3, button4, button5, 
button6, button7, button8, button9];

因此，當摩爾出現在一個按鈕，你點擊之前它消失：

if(button1.innerHTML === "MOLE!"){ 
    button1.onclick = function(){ 
     score+=500; 
     scoreR.innerHTML = "    SCORE:" + (score);  
     button1.innerHTML = "Empty Hole"; 
    } 
}else{ 
    button1.onclick = function(){ 
     score-=2000; 
     scoreR.innerHTML = "    SCORE:" + (score); 
    } 

}

我想知道的，如果不是重複，如果每個按鈕/其他9次，還有優化的一種方式的代碼，例如將一個單一的功能，所有的9種元素陣列一次（？）

來源

2017-10-12 brosej

[是]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for）。 – Marty

看來你是新來的JavaScript，所以一個for循環應該做的伎倆在某種程度上，你可以不用在你的代碼太多的變化理解。在稍後的時間裏，您可以選擇其他依賴高級javascript技術的解決方案。

for (var i = 0; i < buttons.length; i++) { 
    var button = buttons[i]; //this var holds the current button to which the events will be set 

    //here comes your code, with 'button' instead of 'button1': 
    if(button.innerHTML === "MOLE!"){ 
     button.onclick = function(){ 
      score+=500; 
      scoreR.innerHTML = "    SCORE:" + (score);  
      button.innerHTML = "Empty Hole"; 
     } 
    }else{ 
     button.onclick = function(){ 
      score-=2000; 
      scoreR.innerHTML = "    SCORE:" + (score); 
     } 
    } 
}

來源

2017-10-12 02:12:46

非常感謝你，是的，我試圖在這個笑聲中變得更好，再次感謝那個看起來整潔的男人。 – brosej

我會推薦o n您添加onClick所有按鈕元素調用下面的功能等：

<button onClick="checkForMole(this)">

我們通過「這個」中，所以我們可以寫一個函數，動態地使用它。

在javascript中，則：

function checkForMole(button) { 
    // boolean isMole 
    var isMole = button.innerHTML === "MOLE!"; 
    if (isMole) { 
     score += 500; 
     refreshScoreElement(); 
     button.innerHTML = "Empty Hole"; 
    } else { 
     score -= 2000; 
     refreshScoreElement(); 
    } 
} 

function refreshScoreElement() { 
    scoreR.innerHTML = "    SCORE:" + (score); 
}

來源

2017-10-12 02:02:00

不錯！這似乎是一個很好的選擇。 – brosej

我會建議你換一個div標籤內的按鈕進行陣列，那麼你可以addEventListener到div，在回調方法，你檢查目標是否是按鈕，你可以有進一步的動作那之後。創建一個簡單的示例，如下

var foo = document.querySelector(".js_mole"); 
 
foo.addEventListener('click',function(e){ 
 
    var target = e.target; 
 
    if (target.tagName==="BUTTON"){ 
 
    var lableText = target.innerHTML; 
 
    var dataId = target.getAttribute('data-id'); 
 
    console.log('ID:' + dataId + '- lableText:' + lableText); 
 
    } 
 
})

<div class="js_mole"> 
 
    <button class="button" data-id="js_mole_1">1</button> 
 
    <button class="button" data-id="js_mole_3">3</button> 
 
    <button class="button" data-id="js_mole_2">2</button> 
 
</div>

來源

2017-10-12 02:21:17

如何選擇一個數組的多個html元素並將它們全部設置爲一個函數？

回答

相關問題