在Javascript中按下按鈕時將項目添加到列表中

我正在創建一個頁面，其中包含ID爲「faves」的項目的無序列表，ID爲「add」的文本框以及帶有ID的按鈕「btnAdd」。默認情況下，列表包含3個項目，但用戶應該能夠在文本框中輸入文本，單擊該按鈕，並且應將任何他們輸入到文本框中的內容添加到列表中。我似乎無法弄清楚如何讓按鈕被點擊時輸入的文本顯示在列表中。在Javascript中按下按鈕時將項目添加到列表中

這裏是我的HTML，這也包括CSS和Javascript：

<html> 
    <head> 
     <title>Project 1 Tanner Taylor</title> 
     <h1>Project 1 Tanner Taylor</title> 
     <style type="text/css"> 
      #clickMe { 
       background-color: blue; 
       border: 2px double black; 
       font-size: larger; 
      } 
      @media (max-width: 299px) { 
       #faves { 
        color: red; 
       } 
      } 
      @media (max-width: 500px) and (min-width: 300px) { 
       #faves { 
        color: blue; 
       } 
      } 
      @media (min-width: 501px) { 
       #faves { 
        display: none; 
       } 
      } 
     </style> 
     <script type = "text/javascript"> 
      function clickMe() { 
       document.getElementById("clickMe").innerHTML="Ouch!"; 
      } 
     </script> 

    </head> 
    <body> 
     <div id="clickMe" onclick="clickMe()"> 
      Click Me! 
     </div> 
     <div> 
     <ul id="faves"> 
      <li>Video Games</li> 
      <li>Food</li> 
      <li>Sleeping</li> 
     </ul> 
     <input type="text" id="add" size ="50"/> 
     <input type="button" id="btnAdd" value="Add" onclick=/> 
     </div> 
    </body> 
</html>

會有人願意指出我在正確的方向？

來源

2014-09-26 Beth Tanner

試試這個：

<script> 
    function addItem(){ 
     var li = document.createElement("LI"); 
     var input = document.getElementById("add"); 
     li.innerHTML = input.value; 
     input.value = ""; 

     document.getElementById("faves").appendChild(li); 
    } 
</script> 

<input type="button" id="btnAdd" value="Add" onclick="addItem()">

來源

2014-09-26 23:10:35

真棒，這工作，謝謝！ – 2014-09-26 23:19:05

在Javascript中按下按鈕時將項目添加到列表中

回答

相關問題