如何从输入框中添加新的数组元素并将其显示在列表中？

Question

So I've been trying to make js function that takes data from input field, adds it to an array, and after that I display that array as list element. What I mean is if I have a list like this:

• One
• Two

and I enter "Three" in my input box and click ADD that value gets added to array, and gets displayed in list like

• One
• Two
• Three

Here's my code:

 function pushData(){ var i, n, slen,inputText,text; n = [""]; slen = n.length; inputText = document.getElementById('addNew').value; text="<ul>"; for(i=0;i<slen;i++){ text+="<li>"+inputText+"</li>"; } text+="</ul>"; n.push(inputText); document.getElementById('lists').innerHTML = text; } 

 body{ background: gray; } .liste ul{ list-style: none; padding: 0; } .liste ul li{ padding: 15px; background: #F5F5F5; color: gray; font-size: 20px; font-family: sans-serif; font-weight: 400; letter-spacing: 0.01cm; text-transform: uppercase; transition: 0.5s; } .liste ul li:hover{ font-size: 22px; cursor: pointer; color: black; } .liste ul li:nth-child(odd) { background: #DCDCDC; } 

 <input type="text" id="addNew" name="addNewList"> <button onclick="pushData()">Add</button> <div class="liste" id="lists"> </div> 

Right now when I enter new value in the input field, value from the list just gets changed, not added as new list element. Thank You.

Answer 1

You were close :D

What I changed:

1. n is a global variable.
2. Only one element is outputted at a time (no need to output the entire array every time).

 var n = []; function pushData(){ inputText = document.getElementById('addNew').value; n.push(inputText); // This does nothing, except keep an array internally. document.querySelector('#lists ul').innerHTML += "<li>" + inputText + "</li>"; } 

 body{ background: gray; } .liste ul{ list-style: none; padding: 0; } .liste ul li{ padding: 15px; background: #F5F5F5; color: gray; font-size: 20px; font-family: sans-serif; font-weight: 400; letter-spacing: 0.01cm; text-transform: uppercase; transition: 0.5s; } .liste ul li:hover{ font-size: 22px; cursor: pointer; color: black; } .liste ul li:nth-child(odd) { background: #DCDCDC; } 

 <input type="text" id="addNew" name="addNewList"> <button onclick="pushData()">Add</button> <div class="liste" id="lists"> <ul> </ul> </div> 

Answer 2

You need to define the array outside the function, Because each time you call the function to add the new value from the input text, the array initialize and it loses the values accumulated before that.

 var n = []; function pushData(){ var i, slen,inputText,text; inputText = document.getElementById('addNew').value; n.push(inputText); slen = n.length; text="<ul>"; for(i=0;i<slen;i++){ text+="<li>"+ n[i] +"</li>"; } text+="</ul>"; document.getElementById('lists').innerHTML = text; } 

 body{ background: gray; } .liste ul{ list-style: none; padding: 0; } .liste ul li{ padding: 15px; background: #F5F5F5; color: gray; font-size: 20px; font-family: sans-serif; font-weight: 400; letter-spacing: 0.01cm; text-transform: uppercase; transition: 0.5s; } .liste ul li:hover{ font-size: 22px; cursor: pointer; color: black; } .liste ul li:nth-child(odd) { background: #DCDCDC; } 

 <input type="text" id="addNew" name="addNewList"> <button onclick="pushData()">Add</button> <div class="liste" id="lists"> </div>