javascript - Javascript:使用按钮 Onclick 函数创建多个 Li 项目
问题描述
我正在尝试创建一个应用程序来根据输入的数字(即 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>
推荐阅读
- powershell - 所有子文件夹中每个文件中的 Powershell 更新字符串
- html - java.lang.NumberFormatException: null with jsp 和 tomcat
- reactjs - 如何从反应中的测试覆盖率报告中找到未发现的功能
- ansible - Ansible 主机配置,一个哈希用于多个参数
- reactjs - 在 create-react-app 时未创建 Src 文件夹
- prometheus - Prometheus Helm Chart:如何配置黑盒导出器?
- c++ - C++如何返回动态分配的数组
- javascript - 如何在一个 React 组件中划分业务逻辑?
- r - 使用两个具有相同日期的面板数据集进行操作
- python - Flask-SQLAlchemy:不同模块之间的一对多(NoReferencedTableError)