for循环只运行一次 - javascript

时间:2015-07-06 16:51:12

标签: 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";
    }
}

我想这个循环会运行3次。为什么不发生? 这个循环只运行一次,我不明白为什么。

这是相关的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>

我希望脚本代码将显示从“none”更改为“block”。我在css文件中将显示设置为“none”。

1 个答案:

答案 0 :(得分:2)

您会收到阻止执行的错误,因为您执行了此操作,因此没有window[objectRandomName]全局可用。

如果要在全局空间中拥有变量,则需要将声明移到onload之外。

我建议您改为创建自己的变量,但这是对代码的修复

&#13;
&#13;
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";
    }
  }
}
&#13;
#car1, #car2, #car3, #goat1, #goat2, #goat3 { display:none }
&#13;
<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>
&#13;
&#13;
&#13;