2016-06-10 5 views
1

Я m trying to create an element(image) and then set a loop that would produce 5 images in one div(its id="leftSide"). Here моя Код:Как создать элемент в цикле и добавить его (5 раз по одному) в конкретный div?

<script>  
    var number_of_faces = 0; 
    var theLeftSide = document.getElementById("leftSide"); 

    function generate_faces() { 
     for (number_of_faces = 0; number_of_faces < 6; number_of_faces++) { 
      newFace = document.createElement("img"); 
      newFace.setAttribute(
       "src", 
       "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
      ); 
      document.getElementById("leftSide").appendChild("img"); 
     } 
    } 


</script> 

OnLoad тела должен вызывать функцию, но ничего не происходит. Div остается "пустым"

ответ

2

попробуйте этот код

<!DOCTYPE html> 
<html> 
<head> 
    <title>Blah</title> 
</head> 
<body> 
<div id="leftSide"> 

</div> 
<script>  
    var number_of_faces = 0; 
    var theLeftSide = document.getElementById("leftSide"); 

    function generate_faces() { 
     for (number_of_faces = 0; number_of_faces < 5; number_of_faces++) { 
      newFace = document.createElement("img"); 
      newFace.setAttribute(
       "src", 
       "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
      ); 
      theLeftSide.appendChild(newFace); 
     } 
    } 
    generate_faces(); 


</script> 
</body> 
</html> 
+0

что вы делаете с этим: 'var theLeftSide = document.getElementById (" leftSide ");' почему вы держите его, если вы его не используете? ? –

1

изменение document.getElementById("leftSide").appendChild("img"); с document.getElementById("leftSide").appendChild(newFace);

+0

спасибо большое! Еще один вопрос: будет ли пустое пространство между замыкающим контуром и функциональными скобками (без какого-либо кода): document.getElementById ("leftSide"). AppendChild ("img"); }} влияет на то, что функция return не будет определена? –

+0

Или лучше - 'theLeftSide.appendChild (newFace);' иначе нет смысла хранить эту строку кода в объявлении. –

+0

Нет, пустое пространство или пробел не влияет на код в этом случае – monterico

1

вы прошли строку "IMG" вместо элемента newFace.
document.getElementById("leftSide").appendChild(newFace);
и петля должна быть < 5 в петлю 5 раз.