Javascript：使用按钮 Onclick 功能创建多个 Li 项目

Question

I am trying to create an application to display a certain number of list items based on the number input (ie 3 = 3 list items).我正在尝试创建一个应用程序以根据数字输入显示一定数量的列表项（即 3 = 3 个列表项）。 So far I have only been able to create a function that displays one list item with the onClick function.到目前为止，我只能使用 onClick 函数创建一个显示一个列表项的函数。 No matter what code I use, I cannot find a way to create multiple list items from one button click.无论我使用什么代码，我都找不到通过单击按钮创建多个列表项的方法。 Here is my current code, HTML:这是我当前的代码，HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <section>
       <header>Week 5 Assignment</header>
       <section>
           <label>Name: <input type="text" id="nameInput" value="Enter a Name"></label>
       </section>
    <section>
        <label>Num of Times: <input type="number" id="numInput" value="Enter Number"></label>
        <section>
           <ol id="nameOutput"></ol>
           <hr>
          <button onclick="displayName();">Display Name!</button> 
          <button>Reset</button> 
       </section>
    </section>
   </section>

    <script src="script.js"></script>
</body>
</html>

And my JS:还有我的 JS：

    var name = document.getElementById("nameInput").value;
    console.log(name);

    var num = document.getElementById("numInput").value;

    var list = document.getElementById("nameOutput");

    var item = document.createElement("li");

    item.innerText = name;
    list.append(item);
}

Answer 1

Javascript For loop should work for what you are trying to achieve Javascript For 循环应该适用于您要实现的目标

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <section> <header>Week 5 Assignment</header> <section> <label>Name: <input type="text" id="nameInput" value="Enter a Name"></label> </section> <section> <label>Num of Times: <input type="number" id="numInput" value="Enter Number"></label> <section> <ol id="nameOutput"></ol> <hr> <button onclick="displayName();">Display Name!</button> <button>Reset</button> </section> </section> </section> <script src="script.js"></script> </body> </html> <script> function displayName() { var name = document.getElementById("nameInput").value; var num = document.getElementById("numInput").value; var item = document.createElement("li"); item.innerText = name; document.getElementById("nameOutput").innerHTML = ''; for (i = 0; i < num; i++) { document.getElementById("nameOutput").innerHTML += '<li>'+name+'</li>'; } } </script>

Javascript：使用按钮 Onclick 功能创建多个 Li 项目

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-15 21:30:33

Javascript：使用按钮 Onclick 功能创建多个 Li 项目

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-15 21:30:33

解决方案1
1 已采纳 2020-02-15 21:30:33