I am trying to figure out how to make the blue "shield" div cover the red "button" div after 3 clicks successfully. It seems like no matter what I do, the positioning is always off. I've played around with the randomplace variable, but nothing seems to be working. Can anyone offer some guidance?
<div id="shield"></div>
<div id="button" onclick="buttonClick()">
<div id="message"></div>
</div>
<style>
#button {height:200px; width:200px; background-color:red;position:absolute;top:50%;left:50%;border-radius:50%;}
#button:active{transform:scale(0.9,0.9);}
#message{position:relative;top:50%;left:35%;}
#shield{height:200px;width:200px;background-color:blue;visibility:hidden;position:absolute;top:50%;left:50%;}
</style>
<script>
var clickCount = 0;
var shieldDiv = document.getElementById("shield");
function randomLocation() {
var randomlyPlace = function(element){
element.style.position = "absolute";
element.style.top = Math.floor(Math.random()*document.body.clientHeight);
element.style.left = Math.floor(Math.random()*document.body.clientWidth);
};
randomlyPlace(document.getElementById('shield'));
randomlyPlace(document.getElementById('button'));
}
function buttonClick() {
if (clickCount === 0) {
document.getElementById("message").innerHTML = "Hey stop it!";
clickCount++;
randomLocation();
}
else if (clickCount === 1) {
document.getElementById("message").innerHTML = "I said stop!";
clickCount++;
randomLocation();
}
else if (clickCount === 2){
document.getElementById("message").innerHTML = "Ha! Now you can't get me!";
shieldDiv.style.visibility = "visible";
clickCount++
}
else if (clickCount === 3) {
shieldDiv.style.visibility = "hidden";
document.getElementById("message").innerHTML = "How did you get me!?!";
clickCount++;
}
}
</script>