CODEWITHSUNDEEP
javascript
Lior Bar
Lior Bar

Reputation: 223

for loop only run once - javascript

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

I want this loop will runs 3 times. Why is not happens? This loop runs only once and I don't understand why.

This is the Relevant HTML:

<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 want the script code change the display from "none" to "block". I set the display to "none" in my css file.

Upvotes: 0

Views: 353

Answers (1)

mplungjan
mplungjan

Reputation: 177691

You get errors that block execution because you do this onload and hence do not have window[objectRandomName] available globally.

You need to move the declarations outside the onload if you want to have the vars in global space.

I suggest you create your own vars instead but here is a fix for your code

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.onload=function() {
  window[objectRandomName].car = true;
  for (var jj = 1; jj < 4; jj++){
    objectName = "door" + jj;
    carName = "car" + jj;
    goatName = "goat" + jj;
    console.log(objectName,objectRandomName)
    if (window[objectName] && window[objectName].car == true){
        document.getElementById(carName).style.display = "block";
    }
    else{
        document.getElementById(goatName).style.display = "block";
    }
  }
}
#car1, #car2, #car3, #goat1, #goat2, #goat3 { display:none }
<div id="main">
    <div id="door1">
        <div id="InDoor1">
        </div>
        <div id="goat1">G1</div>
        <div id="car1">C1</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">G2</div>
        <div id="car2">C2</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">G3</div>
        <div id="car3">C3</div>
        <div id="spaceB"></div>
        <button type="button" id="Bdoor3" onclick="ChooseDoor(3);">דלת 3</button>
    </div>
    <div class="space"></div>

</div>

Upvotes: 2

Related Questions