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."
< script >
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.ierHTML += "item " + n + ':' + item;
} else {
document.getElementById("text").ierHTML = " ";
}
}
< /script>
<style> #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;
}
</style>
<html>
<head>
<meta charset="utf-8" />
<title>JS Buttons</title>
</head>
<body>
<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>
</body>
</html>