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 = " "; } }
#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>
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 = " "; } }
#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>
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(' ');
}
}
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 = " ";
}
}
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 = " ";
}
}
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.
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 = " "; } }
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.