[英]Javascript: Creating Multiple Li Items with Button Onclick Function
我正在嘗試創建一個應用程序以根據數字輸入顯示一定數量的列表項(即 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.