var door1 = {open: false,car: false,choose: false};
var door2 = {open: false,car: false,choose: false};
var door3 = {open: false,car: false,choose: false};
var carName = 0;
var objectName = 0;
var goatName = 0;
var min = 1;
var max = 4;
var random = Math.floor(Math.random()*(max - min) + min);
var objectRandomName = "door" + random;
window[objectRandomName].car = true;
for (var jj = 1; jj < 4; jj++){
objectName = "door" + jj;
carName = "car" + jj;
goatName = "goat" + jj;
if (window[objectName].car == true){
document.getElementById(carName).style.display = "block";
}
else{
document.getElementById(goatName).style.display = "block";
}
}
The loop should iterate three times, but it's only running once. I'm confused as to why this is happening.
Here's the relevant HTML code:
<div id="main">
<div id="door1">
<div id="InDoor1">
</div>
<div id="goat1"></div>
<div id="car1"></div>
<div id="spaceB"></div>
<button type="button" id="Bdoor1" onclick="ChooseDoor(1);">דלת 1</button>
</div>
<div class="space"></div>
<div id="door2">
<div id="InDoor2">
</div>
<div id="goat2"></div>
<div id="car2"></div>
<div id="spaceB"></div>
<button type="button" id="Bdoor2" onclick="ChooseDoor(2);">דלת 2</button>
</div>
<div class="space"></div>
<div id="door3">
<div id="InDoor3">
</div>
<div id="goat3"></div>
<div id="car3"></div>
<div id="spaceB"></div>
<button type="button" id="Bdoor3" onclick="ChooseDoor(3);">דלת 3</button>
</div>
<div class="space"></div>
</div>
I need the script to change the display property from "none" to "block". The initial CSS setting for display is set to "none."