Javascript：更改z-index onclick

Question

我已经看到类似于这个的问题，但不是很重要。我只是想做一些非常简单的事情：当点击按钮1时，它应该隐藏，按钮2应该出现;然后当点击按钮2时，按钮2应该隐藏，按钮1应该显示。 我试图通过修改z-index来做到这一点，但它不起作用。 这是我用来做的代码：

if (attacker == player 1) {
    document.getElementById("p1-play").style.zIndex = -1;
    document.getElementById("p2-play").style.zIndex = 1;
}
else {
    document.getElementById(p2-play).style.zIndex = -1;
    document.getElementById(p1-play).style.zIndex = 1;
}

其中p1-play是按钮1，p2-play是按钮2

Answer 1

最好使用display：

var p1Play = document.getElementById("p1-play");
var p2Play = document.getElementById("p2-play");

if (attacker == player1) {
    p1Play.style.display = 'none';
    p2Play.style.display = 'block';
}
else {
    p1Play.style.display = 'block';
    p2Play.style.display = 'none';
}