Question

我正在尝试将我输入的信息输入到文本框中，以便在我的代码中将无序列表显示在浏览器中。在输入5个项目后，我也试图让它显示一条消息。请参阅下面的代码。

<!DOCTYPE html>
<html>
<head>

   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Hands-on Project 3-4</title>
   <link rel="stylesheet" href="styles.css" />
   <script src="modernizr.custom.05819.js"></script>
</head>

<body>
   <header>
      <h1>
         Hands-on Project 3-4
      </h1>
   </header>

   <article>
      <div id="results">
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
          <p id="resultsExpl"></p>
      </div>
      <form>
          <fieldset>
            <label for="toolBox" id="placeLabel">
              Type the name of a tool, then click Submit:
            </label>
            <input type="text" id="toolBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button">Submit</button>
          </fieldset>
      </form>
   </article>
    <script>
        var i = 1;
        var listItem = "";

        function processInput() {
            if (i <= 5) {             

               listIem = document.getElementById("item" + i).innerHTML = i;

            }

        }
        if (window.addEventListener) {
            window.addEventListener("click", processInput, false);
        } else if (window.attachEvent) {
            window.attachEvent("onclick", processInput);
        }
    </script>
</body>
</html>

Answer 1

此：

function processInput() {
    if (i <= 5) {  
        listIem = document.getElementById("item" + i).innerHTML = i;
    }
}

应该是这样的：

function processInput() {
    if (i <= 5) {  
        document.getElementById("item" + i).textContent = document.getElementById("toolBox").value;
        i++; // increment i here
    }
}

或者这个（如果你想要分开的话）：

function processInput() {
    if (i <= 5) {  
        var listItem = document.getElementById("item" + i);
        var input = document.getElementById("toolBox");
        listItem.textContent = input.value;
        i++; // increment i here
    }
}

使用.textContent代替.innerHTML，并使用#toolBox获取.vlaue输入值。

注意：如果您可以动态生成列表项，那就更好了（查看here的方式）。

单击提交后，从文本框中获取要显示的项目

1 个答案: