Question

我用vanilla javascript和html做了一个简单的Whack-a-Mole游戏，所以我制作了一个包含9个按钮元素的数组：

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

}

我想知道如果不是每个按钮重复if / else 9次，有一种优化代码的方法，比如一次将单个函数应用于数组的所有9个元素（？）

Answer 1

我建议您在添加onClick的所有按钮元素上调用以下函数，如：

<button onClick="checkForMole(this)">

我们传递'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);
}

Answer 2

似乎你是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);
        }
    }
}

Answer 3

我建议你在div标记中包含该数组按钮，然后你可以addEventListener到那个div，在回调方法中，检查目标是否是按钮，然后您可以使用它进一步操作。我创建了一个简单的示例，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

如何选择数组中的多个html元素并将它们全部设置为一个函数？

3 个答案: