for循環只能運行一次-javascript

Question

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>

我希望腳本代碼將顯示從“無”更改為“阻止”。 我在css文件中將顯示設置為“無”。

Answer 1

由於執行此onload操作，因此會收到阻止執行的錯誤，因此沒有全局可用的window[objectRandomName] 。

如果要將變量放在全局空間中，則需要將聲明移到onload之外。

我建議您改為創建自己的var，但這是您的代碼的修復

 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>