Question

我正在创建一个页面，其中包含带有ID＆＃34; faves＆＃34;的项目的无序列表，带有ID＆＃34的文本框;添加＆＃34;以及带有ID＆＃的按钮34; btnAdd＆＃34 ;.默认情况下，列表包含3个项目，但用户应该能够在文本框中输入文本，单击按钮，并且应该将他们在文本框中输入的内容添加到列表中。我似乎无法弄清楚如何在单击按钮时输入要在列表中显示的文本。

这是我的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>

有人愿意指出我正确的方向吗？

Answer 1

试试这个：

<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()">

在Javascript中按下按钮时将项添加到列表中

1 个答案: