个人中心
gpt4 book ai didi

Javascript:使用按钮 Onclick 函数创建多个 Li 项目

转载 作者：行者123 更新时间：2023-12-02 21:46:10 24 4
gpt4 key购买 nike

我正在尝试创建一个应用程序来根据输入的数字(即 3 = 3 个列表项)显示一定数量的列表项。到目前为止，我只能创建一个使用 onClick 函数显示一个列表项的函数。无论我使用什么代码，我都找不到通过单击按钮创建多个列表项的方法。这是我当前的代码，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>

还有我的 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);
}

最佳答案

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 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60242980/

24 4 0
文章推荐： javascript - 返回多个站点的 HTTP 状态代码
文章推荐： windows - 在Windows 8上设置Hadoop时找不到Namenode类
文章推荐： hadoop - 插入时读取配置单元
文章推荐： javascript - 如何在 JavaScript 中删除字符串中的重复单词？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com