JavaScript有序列表和内容

Question

So my problem is about creating new element in ordered list with exact content. I have this homework and I am studying JS only for a couple of days. I have to make an ordered list and a button ADD ITEM. When I click the button it must create a new element in the ordered list with next number containig in it. So now when I click the button the prompt window appear and the text that I write goes in the next "li", but I can't figure how next "li" will display item 1, item 2, item 3 etc. And also I need to hide the first element cause "item 1: Text always shows up."

 function addItem() { var item = prompt("Please insert a text", "It will be added to the list"); if (item != null) { var n = 0; var ol = document.getElementById("myList"); var li = document.createElement("li"); ol.appendChild(li); li.innerHTML += "item " + n + ':' + item; } else { document.getElementById("text").innerHTML = "&nbsp"; } } 

 #nested { width: 95%; height: 100%; border: 1px solid red; margin-left: auto; margin-right: auto; } #large { width: 80%; height: 100%; border: 1px solid blue; margin-left: auto; margin-right: auto; } ol { list-style-type: arabic; list-style-position: inside; margin-top: 10px; margin-right: 30px; } .right { float: right; } 

 <div id="large"> <div id="nested"> <form method="get"> <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" /> <br /> <br /> <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" /> </form> <ol reversed="reversed" class="right" id="myList"> Unordered list <li>item 1:<span id="text">Text</span> </li> </ol> </div> </div> 

Answer 1

• Decalre var n outside of the function
• Increment it in every function call

 var n = 1; function addItem() { var item = prompt("Please insert a text", "It will be added to the list"); if (item != null) { ++n; var ol = document.getElementById("myList"); var li = document.createElement("li"); li.innerHTML = "item " + n + ':' + item; ol.appendChild(li); } else { document.getElementById("text").innerHTML = "&nbsp"; } } 

 #nested { width: 95%; height: 100%; border: 1px solid red; margin-left: auto; margin-right: auto; } #large { width: 80%; height: 100%; border: 1px solid blue; margin-left: auto; margin-right: auto; } ol { list-style-type: arabic; list-style-position: inside; margin-top: 10px; margin-right: 30px; } .right { float: right; } 

 <div id="large"> <div id="nested"> <form method="get"> <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" /> <br /> <br /> <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" /> </form> <ol reversed="reversed" class="right" id="myList"> Unordered list <li>item 1:<span id="text">Text</span> </li> </ol> </div> </div> 

Answer 2

The answer depends on if you are able to use libraries or not. If you can use jQuery this is a lot easier, if not, it is still doable, just more code. I will write out an answer with both...

jQuery Answer...

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var count = $('#myList').find('ol').find('li').length;
    if(count > 1) {
        $('#myList').find('ol').find('li').hide();
    }
    var nextItem = count + 1;
    $('#myList').find('ol').append('<li>Item ' + nexItem + ':' + item + '</li>');
  } else {
    $('#text').html('&nbsp;');
  }
}

Non jQuery (Vanilla JavaScript)...

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var n = document.getElementById("myList").getElementsByTagName("li").length;
    if(n > 0) {
        var elements = document.getElementById("myList").getElementsByTagName("li");
        for(var i = 0; i < n; i++) {
            elements[i].style.visibility = "hidden";
            elements[i].style.display = "none";
        }
    }
    var nextItem = n + 1;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + nextItem + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

There is also a way you can do it to speed it up a little by storing the count as a variable and then increment it each time to get the new number, that way you aren't counting DOM elements each time. It would be a simple addition. Here is an example of that...

//inside a <script > tag
var count = 0;
function addItem() {
    var item = prompt("Please insert text here", "It will be added to the list");
    if(item != null) {
        if(count > 0) {
            var items = document.getElementById("myList").getElementsByTagName("li");
            for(var i = 0; i < items; i++) {
                items[i].style.visibility = "hidden";
                items[i].style.display = "none";
            }
        }
            count += 1;
            var list = document.getElementById("myList");
            var li = document.createElement("li");
            li.innerHTML = "item " + count + ": " + item;
            list.getElementsByTagName("ol").append(li);
    } else {
        document.getelementById("text").innerHTML = "&nbsp;";
    }
}

I hope this helps. There are many...many ways to solve this, these are only a couple. Let me know if this isn't working or you need more help.

Answer 3

You could also always count how many li are in your list and use that for n . For deletion, you just need to hide or remove the item on the first pass.

 var ADDED_ITEMS = 0; function addItem() { var placeholder = "It will be added to the list"; var item = prompt("Please insert a text", placeholder); if (item != null) { var ol = document.getElementById("myList"); // Remove the existing LI on the first pass if (++ADDED_ITEMS == 1) ol.removeChild( ol.querySelector('li') ); // Get count of LI in list var n = ol.querySelectorAll('li').length + 1; // Create new LI var li = document.createElement("li"); ol.appendChild(li); li.innerHTML += "item " + n + ':' + item; } else { document.getElementById("text").innerHTML = "&nbsp"; } } 

 #nested { width: 95%; height: 100%; border: 1px solid red; margin-left: auto; margin-right: auto; } #large { width: 80%; height: 100%; border: 1px solid blue; margin-left: auto; margin-right: auto; } ol { list-style-type: arabic; list-style-position: inside; margin-top: 10px; margin-right: 30px; } .right { float: right; } 

 <div id="large"> <div id="nested"> <form method="get"> <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" /> <br /> <br /> <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" /> </form> <ol reversed="reversed" class="right" id="myList"> Unordered list <li>item 1:<span id="text">Text</span></li> </ol> </div> </div>