CODEWITHSUNDEEP
javascripthtmlfunctiongetelementbyid
James Dorfman
James Dorfman

Reputation: 1818

Adding a list item

Could anyone please help me sort out a bug in my beginner code? I am trying to add an list item to a list and trying to change the id of what list i'm adding it to in javascript. Thanks in advance. 

<html>
<head>
<script>
window.onload = init;
function init() {
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv() {
    var counter=1
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    alert("adding " + userInput);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById("ul" + loop());
    ul.appendChild(li);
}

function loop() {
    return counter;
    if (counter==3){
        counter==0;
    }
    counter++;
}
</script>
</head>
<body>
    <form id="form">
        <input id="textInput" type="text" placeholder="input text here">
        <input id="submit" type="button">
    </form>
    <ul id="ul1">
    </ul>
    <ul id="ul2">
    </ul>
    <ul id="ul3">
    </ul>
</body>

Upvotes: 0

Views: 92

Answers (2)

gillyspy
gillyspy

Reputation: 1598

i think you want is one of these:

  1. Give the scope of counter to be global (yuk)
  2. create a closure around everything and declare counter there
  3. you could pass counter into loop() when you call it.
  4. define loop() in changeDiv().

I think you want #2 though so I fiddled it with several corrections in your code:

fiddle

The reason that I went with #2 is:

  • that a closure allows your logic to gain application to the resources it needs
  • but protect the scope at which other applications might be running (now or in the future) from being affected by any changes your application might attempt to that scope. For example, if you declared the counter as a global then all other javascript would potentially have read/write access to it which could negatively affect your demonstrated code, the other code, or both
  • keeps your current beginner code as unchanged as possible
  • gets you programming with an extremely important aspect of javascript that will help you today and in future as you learn

Answer #4 is similar in that it would create a closure for both changeDiv and loop whereby they both have access to what they need. However, I didn't want to change your existing logical blocks too much to stall incremental learning. But one could definitely make an argument for the loop() (which isn't really a loop but rather a setter) being enclosed in changeDiv() -- albeit you would likely remove the separate function call at that point and integrate the code more.

Upvotes: 2

mingos
mingos

Reputation: 24502

Essentially, you need to:

  • declare counter in a global scope (loop() cannot access it otherwise)
  • in loop(), the return statement must be the LAST thing. Anything after it won't get executed.

I altered the logic a bit and the final code is this:

window.onload = init;
var counter=1;
function init(){
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv(){
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    var id = "ul" + loop();
    alert("adding " + userInput + " to " + id);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById(id);
    ul.appendChild(li);
}

function loop(){
    var tmp = counter++;

    if (counter==4){
        counter=1;
    }
    return tmp;
}

Note the changes in the loop() function.

I also altered the changeDiv() function to display the list ID in the alert.

Upvotes: 0

Related Questions