CODEWITHSUNDEEP
javascript
user1974333
user1974333

Reputation: 31

javascript: for loop

Why this for loop doesnt work?

javascript:

function create(){
    var newDiv = document.createElement("input");
    var character = "piyush";

    var i =0;

    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    for( i =0; i< character.length ; i++)
    {

    document.getElementById("tryingin").appendChild(newDiv);
    }

 }

html:

<div id="tryingin" onMouseOut="create()" style="width:200px; height:200px; background-color:black"> </div>

now when i alert something in the for loop . i see the alert box 6 times one after the other(as character.length == 6). but why i dont see 6 textboxes appended in the division? And what should be the correct code to append all 6 textboxes all at once.

Help appreciated. Regards!

Upvotes: -1

Views: 342

Answers (5)

THE ONLY ONE
THE ONLY ONE

Reputation: 2190

Please change your code to this function it might help you...

    function create(){
        var character = "piyush";
        var i =0;

        for( i =0; i< character.length ; i++)
        {
            var newDiv = document.createElement("input");
            newDiv.type = "text";
            newDiv.style.background = "red";
            newDiv.style.width ="20px";
            newDiv.style.height ="20px";
            document.getElementById("tryingin").appendChild(newDiv);
        }

 }

Upvotes: 0

Ghost Answer
Ghost Answer

Reputation: 1498

try this in your script 

     var character = "piyush";

    for(var i =0; i < character.length; i++) 
    {
    var div = document.createElement("input");
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "white";
    div.innerHTML = "Hello";

    document.body.appendChild(character );
    }

I hope this will work for you.

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146660

If you append a node into a new location, it gets moved:

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

Upvotes: 2

Nemo64
Nemo64

Reputation: 2683

Because you only created one and appended it over and over again. You have to call document.createElement("input") multiple times to create multiple elements.

var character = "piyush";

for(var i =0; i < character.length; i++) {
    var newDiv = document.createElement("input");
    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    document.getElementById("tryingin").appendChild(newDiv);
}

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 817208

If an element is already part of the DOM, .appendChild will first detach it from its current parent and attach it to the new parent. From the MDN documentation:

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

In your case you only have one DOM element. If you want to duplicate the element, you can clone it:

var parent = document.getElementById("tryingin");
for (...) {
    parent.appendChild(newDiv.cloneNode());
}

Upvotes: 3

Related Questions