如何從我使用的輸入值中獲取數組的元素？

Question

請，如果有人可以告訴我，我將如何在數組內部添加輸入值。 然后該元素的值可以顯示在瀏覽器中，並且當我刷新頁面時也消失了。 我嘗試使用的代碼如下。

<input type="text" id="name" placeholder="name" ><br><br>
<input type="submit" value="add" id="btn">

<p id="demo"></p>

<script>

var btn=document.getElementById("btn");
var all=[];

btn.onclick=function(){

    var name=document.getElementById("name").value;

   all.push(name);

    for(var i=0;i<all.length;i++){
        /* console.log(all[i]); */
        document.getElementById("demo").innerHTML=all[i];

    }
}

</script>

感謝您的幫助

Answer 1

無需循環。 只需將.innerHTML設置為所有數組值，使用Array.join()方法用HTML <br>分隔它們Array.join() 。 不需要任何使列表在頁面刷新時開始為空白的方法，因為當頁面刷新時，將重新分析初始HTML，並且數組數據將丟失。

僅供參考：命名JavaScript變量name不是一個好主意，因為它可能與Global name屬性沖突。

 var btn=document.getElementById("btn"); var all=[]; btn.onclick=function(){ var item = document.getElementById("name").value; all.push(item); document.getElementById("demo").innerHTML = all.join("<br>"); } 

 <input type="text" id="name" placeholder="name" ><br><br> <input type="submit" value="add" id="btn"> <p id="demo"></p> 

Answer 2

創建一個變量，並在內部循環中使用此變量從數組中連接值。 然后外部循環使用innerHTML並將此變量的值添加到dom

 var btn = document.getElementById("btn"); var all = []; btn.onclick = function() { let val = ''; var name = document.getElementById("name").value; all.push(name); for (var i = 0; i < all.length; i++) { val += all[i] + ' ' } document.getElementById("demo").innerHTML = val; } 

 <input type="text" id="name" placeholder="name"><br><br> <input type="submit" value="add" id="btn"> <p id="demo"></p>