Javascript ordered list and content
<p>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."</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 = "&amp;nbsp";
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="large"&gt;
  &lt;div id="nested"&gt;
    &lt;form method="get"&gt;
      &lt;input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" /&gt;
    &lt;/form&gt;
    &lt;ol reversed="reversed" class="right" id="myList"&gt;
      Unordered list
      &lt;li&gt;item 1:&lt;span id="text"&gt;Text&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>