2016-03-01 5 views
-6

Я пишу код javascript. Но когда я пытаюсь выполнить его в браузере (firefox chrome) браузер просто зависает и вынуждает его уйти. Я пытаюсь создать 5 из этого изображения в случайных местах leftSide. Вот код, что здесь не так?браузер зависает с этим кодом js, почему?

<html><head> 
<title></title> 
<meta charset=utf-8> 
<style> 
img { 
    position: absolute;} 
div { 
    position: absolute; 
    width: 500px; 
    height: 500px;} 

#rightSide { 
    left: 500px; 
    border-left: 1px solid black;} 
</style> 
    <script> 
    var numberOfFaces = 5; 
     function generateFaces() { 
     while (numberOfFaces) { 
     var smileFace = document.createElement("img"); 
     var random_number = Math.floor(Math.random() * 400); 
     smileFace.src = "smile.png"; 
     smileFace.style.top = random_number + "px"; 
     smileFace.style.left = random_number + "px"; 
     document.getElementById('leftSide').appendChild(smileFace);}} 
</script> 
</head> 
<body onload="generateFaces()"> 
<h2>Matching Game</h2> 
<p>Click on the extra smiling face on the left.</p> 
<div id="leftSide"></div> 
<div id="rightSide"></div> 
</body></html> 
+3

'в то время как (numberOfFaces) {код не меняется numberOfFaces}' ... –

+1

Потому что ваш 'numberOfFaces' не уменьшаем в' while' петля – MysterX

+1

Бесконечная петля. Уменьшить или поставить любое условие для 'numberOfFaces' – Rajesh

ответ

2

Вы определяете numberOfFaces как 5, а затем начать while петлю, которая проверяет, является ли эта переменная имеет значение truthy - все, что выше 0 является truthy. Эта переменная никогда не изменится, что приведет к бесконечному циклу.

Вам необходимо уменьшить его в петле, используя numberOfFaces--; или аналогичный. Может быть, как это:

<script> 
    var numberOfFaces = 5; 
    function generateFaces() { 
     while (numberOfFaces) { 
     var smileFace = document.createElement("img"); 
     var random_number = Math.floor(Math.random() * 400); 
     smileFace.src = "smile.png"; 
     smileFace.style.top = random_number + "px"; 
     smileFace.style.left = random_number + "px"; 
     document.getElementById('leftSide').appendChild(smileFace); 
     numberOfFaces--; 
     } 
    } 
</script> 

Может быть сделать учебник по while петлями, чтобы помочь разобраться с этим: http://www.tutorialspoint.com/javascript/javascript_while_loop.htm

Примечание:Выше в то время как цикл остановится, когда numberOfFaces становится 0. В JS 0 является ложным.

+0

Большое спасибо за любезную помощь и ссылку. Таким образом, цикл останавливается только тогда, когда он достигает 0, что является «ложным». Пока это «истина» (выше 0) и никогда не достигает 0, она бесконечна. Правильно? – reko

+0

В вашем случае, да - вы только написали 'while (numberOfFaces)', который проверяет, является ли numberOfFaces правдивым или нет. Если вы хотите, чтобы это было определенное значение, вы можете сделать 'while (numberOfFaces> 4)' например – millerbr

0

Эта замкнутая петля бесконечна; numberOfFaces постоянно 5, что является правдой. Попытайтесь изменить его на что-то другое.

0
while(true) { 
    // never stops 
    // 5 is truthy value 
} 

Вы ищете это:

for(var i=numberOfFaces; 0 < i; i--){ 
    // your iteration code 
} 
Смежные вопросы