CODEWITHSUNDEEP
javascript
samzmann
samzmann

Reputation: 2566

Javascript: change z-index onclick

I have seen questions similar to this one but not quite on point. I just want to do something really simple: when button 1 is clicked, it should hide and button 2 should appear; and then when button 2 is clicked, button 2 should hide and button 1 should show. I am trying to do this by modifying the z-index, however it is not working. This is the code I am using to do it:

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

where p1-play is button 1 and p2-play is button 2

Upvotes: 0

Views: 1317

Answers (1)

steves165
steves165

Reputation: 104

It would be better to use 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';
}

Upvotes: 3

Related Questions