2017-03-18 62 views
0

我目前有四个按钮,当所有按钮被按下时我都会发出警报,但是我想要的是当我们按下按钮1和按钮3或按钮1之类的按钮组合时和按钮2或按钮3和将Button4警报时,所有按钮被点击单击一系列按钮以满足javascript中的条件

<html> 
<head> 
<title>Display</title> 

</head> 
<body> 
<center> 
</br></br></br></br></br></br> 
<button id="button1" class="tictac" type="button" onclick="button1check()">button1</button> 
<button id="button2" type="button" onclick="button2check()">button2</button></br></br> 
<button id="button3" type="button" onclick="button3check()">button3</button> 
<button id="button4" class="tictac" type="button" onclick="button4check()">button4</button> 
</center> 

<script type="text/javascript"> 
button1clicked = 0; 
button2clicked = 0; 
button3clicked = 0; 
button4clicked = 0; 

function button1check() { 



    button1clicked = 1; 


    if (button1clicked == 1 && button2clicked == 1 && button3clicked == 1 && button4clicked == 1) { 
    alert('you win!'); 
    button1clicked = 0; 
    button2clicked = 0; 
    button3clicked = 0; 
    button4clicked = 0; 

    } 
} 


function button2check() { 

    button2clicked = 1; 


    if (button1clicked == 1 && button2clicked == 1 && button3clicked == 1 && button4clicked == 1) { 
    alert('you win!'); 
    button1clicked = 0; 
    button2clicked = 0; 
    button3clicked = 0; 
    button4clicked = 0; 

    } 

} 

function button3check() { 

    button3clicked = 1; 


    if (button1clicked == 1 && button2clicked == 1 && button3clicked == 1 && button4clicked == 1) { 
    alert('you win!'); 
    button1clicked = 0; 
    button2clicked = 0; 
    button3clicked = 0; 
    button4clicked = 0; 
    } 
} 


    function button4check() { 

    button4clicked = 1; 

    if (button1clicked == 1 && button2clicked == 1 && button3clicked == 1 && button4clicked == 1) { 
    alert('you win!'); 
    button1clicked = 0; 
    button2clicked = 0; 
    button3clicked = 0; 
    button4clicked = 0; 
    } 
} 
</script> 

</body> 
</html> 

回答

0

我会提出不同的方法应该是不显示。使用以下代码,您可以在winner阵列中设置获胜组合。如果点击次数等于按钮次数并且没有点击获胜组合,则重置游戏。

let winner = [[1, 3], [2,4]]; 
 
let clicked = []; 
 

 
let btns = Array.from(document.getElementsByTagName("button")); 
 
btns.forEach(b => { 
 
    b.addEventListener('click', function(el) { 
 
    let number = el.target.id.replace(/[^0-9]/g, ""); 
 
    clicked.push(number); 
 
    if (winner.some(w => w.sort().join("") === clicked.sort().join(''))) { 
 
     alert("You're a winner"); 
 
     clicked = []; 
 
    } else if (clicked.length === btns.length) { 
 
     clicked = []; 
 
     alert("Nah!"); 
 
    } 
 
    }) 
 
})
<button id="button1" class="tictac" type="button">button1</button> 
 
<button id="button2" type="button">button2</button> 
 
<button id="button3" type="button">button3</button> 
 
<button id="button4" class="tictac" type="button">button4</button>

+0

可以我们设置多个阵列等用于一个组合的阵列,而另一个用于另一组合。 – vamshi

+0

编辑答案,以便它有可能@vamshi – baao

0

这里是一个工作的例子,但是,你的代码也工作。

var btns = [0,0,0,0]; 
 

 
function checkButtons() { 
 
    if (btns[0] == 1 && btns[1] == 1 && btns[2] == 1 && btns[3] == 1) { 
 
    alert('You win!'); 
 
    for (var i = 0; i < btns.length; i++) { 
 
     btns[i] = 0; 
 
    } 
 
    } 
 
} 
 

 
function btnClick(n) { 
 
    btns[n - 1] = 1; 
 
    checkButtons(); 
 
}
<center> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    <button onclick="btnClick(1)">button1</button> 
 
    <button onclick="btnClick(2)">button2</button> 
 
    </br> 
 
    </br> 
 
    <button onclick="btnClick(3)">button3</button> 
 
    <button onclick="btnClick(4)">button4</button> 
 
</center>