Javascript 从文本框中获取要在单击“提交”后显示的项目_Javascript_Html

Javascript 从文本框中获取要在单击“提交”后显示的项目

javascript html

Javascript 从文本框中获取要在单击“提交”后显示的项目,javascript,html,Javascript,Html,我试图获取我在文本框中键入的信息，以显示在我代码中的无序列表中，并将其发送到浏览器。我还试图让它显示一条消息后，我输入5项。请看下面我的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>H

我试图获取我在文本框中键入的信息，以显示在我代码中的无序列表中，并将其发送到浏览器。我还试图让它显示一条消息后，我输入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>


实践项目3-4
实践项目3-4








键入工具的名称，然后单击“提交”：
提交
var i=1；
var listItem=“”；
函数processInput（）{
如果（i这个：
函数processInput（）{
如果（i）和什么不起作用？你有什么具体的错误吗？它是否显示1
，2
…相反？当我按下提交按钮或我得到数字1-5时，我一直没有定义。顺便说一句，你拼写了“listItem”，而我认为你的意思是拼写“listItem”。所以要回答你的问题，是的。它显示了1、2、3、4、5。有什么方法可以用switch语句来代替吗？@RodO为什么需要switch语句？我想知道在这种情况下是否需要使用switch语句？如何操作。@RodO我忘了提到每次调用processInput
时都需要递增I。请参阅edi新答案不起作用。我发布了整个函数，以便您能够理解。谢谢！我注意到它忽略了列表中的第一个值。
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
    }
}