基于两个输入框实现名称按指定次数重复列表的问题求助

你目前的代码仅实现了名称的单次添加，缺少获取重复次数并循环创建元素的逻辑，以下是修改后的完整方案：

示例效果说明 #

点击按钮后，输入的名称会按照指定的整数次数在列表中重复显示，例如输入名称"Michael"和次数"5"，列表中会出现5个"Michael"条目。

修改后的完整代码 #

<html>
<head>
<style>
input {
    display: block;
}
#msgs {
    margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
  var text = document.getElementById("name").value; 
  // 获取次数输入并转换为整数类型
  var count = parseInt(document.getElementById("count").value);
  
  // 简单验证：确保输入的是有效正整数
  if (isNaN(count) || count <= 0) {
    alert("请输入有效的正整数次数");
    return;
  }
  
  var listContainer = document.getElementById("list");
  // 循环创建并添加元素
  for (var i = 0; i < count; i++) {
    var div = document.createElement("div");
    div.textContent = text;
    listContainer.appendChild(div);
  }
  
  document.getElementById("name").value = ""; // 清空名称输入框
}
</script>
</html>

关键修改点说明 #

• 获取并处理次数值：通过parseInt()将次数输入框的字符串值转换为整数，确保后续循环逻辑可正常执行。
• 循环创建元素：使用for循环，根据指定次数重复执行创建和添加元素的操作，实现名称的多次显示。
• 输入验证：添加判断逻辑过滤无效输入（非数字、零或负数），避免异常情况。

内容的提问来源于stack exchange，提问作者stoggafu