在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中按下按钮时将项目添加到列表中

回答

相关问题