如何选择一个数组的多个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元素并将它们全部设置为一个函数？

回答

相关问题