我试图创建一个循环，其中循环的限制从输入“Enter＃of Circles”中拉出。它目前正在根据输入的变化累积值。
有没有办法只从输入中提取 最后一个值来创建一个div循环？
非常感谢！
<!DOCTYPE html>
<head>
<title>Intro Webpage!</title>
<style>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br>
<b>Enter # of Circles<b>
<br>
<input type="integer" id="circles">
</b></b>
<form>
<div id="Participentfieldwrap">
<svg height="100" width="200">
<line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
</svg>
</svg>
<br>
<b>Color<b>
<br>
<input type="integer" id="Color">
</b></b>
<script>
//Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
var cir = document.getElementById("cir");
var into = document.getElementById("Color");
into.addEventListener("keyup", myFunction, false);
function myFunction() {
if(document.getElementById("Color").value == 1)
cir.style.fill = "green";
else if(document.getElementById("Color").value == 2)
cir.style.fill = "red";
else if(document.getElementById("Color").value == 3)
cir.style.fill = "blue";
else cir.style.fill = "Yellow";
}
</script>
</div>
</form>
<script type="text/javascript">
//Loop for creating multiple divs in a form using a limit that is set in an integer input
var participantsField = document.getElementById("Participentfieldwrap"),
form = document.getElementsByTagName("form")[0],
ContestantNum = document.getElementById("circles"),
i, timer;
function createCircles(val) {
for(i = 0; i < val; i++) {
var clone = participantsField.cloneNode(true);
form.appendChild(clone);
}
}
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
createCircles(ContestantNum.value);
}, 800);
});
</script>
</body>
</html>
答案 0 :(得分：1)
这是因为您要附加到现有的圈子，您不会清除并删除创建更多圈子时存在的圈子。所以它更多地附加于存在的东西。您需要做的是在从输入创建项目之前删除项目（在这种情况下是form中的子项）：
修改
正如 @Azamantes 指出，#Participentfieldwrap，#Color和#cir存在重复的ID。我已更新代码，因此它会为Participentfieldwrap_i，Color_i和cir_i分配新ID，其中i每圈从0..n-1开始。
function createCircles(val) {
// Removing previous circles
while (form.firstChild) {
form.removeChild(form.firstChild);
}
for(i = 0; i < val; i++) {
var clone = participantsField.cloneNode(true);
// Assigning new ids
clone.id = "Participentfieldwrap_" + i;
clone.querySelector("input").id = "Color_" + i;
clone.querySelector("circle").id = "cir_" + i;
form.appendChild(clone);
}
...
这是一个代码段：
<!DOCTYPE html>
<head>
<title>Intro Webpage!</title>
<style>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br>
<b>Enter # of Circles<b>
<br>
<input type="integer" id="circles">
</b></b>
<form>
<div id="Participentfieldwrap">
<svg height="100" width="200">
<line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
</svg>
</svg>
<br>
<b>Color<b>
<br>
<input type="integer" id="Color">
</b></b>
<script>
//Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
var cir = document.getElementById("cir");
var into = document.getElementById("Color");
into.addEventListener("keyup", myFunction, false);
function myFunction() {
if(document.getElementById("Color").value == 1)
cir.style.fill = "green";
else if(document.getElementById("Color").value == 2)
cir.style.fill = "red";
else if(document.getElementById("Color").value == 3)
cir.style.fill = "blue";
else cir.style.fill = "Yellow";
}
</script>
</div>
</form>
<script type="text/javascript">
//Loop for creating multiple divs in a form using a limit that is set in an integer input
var participantsField = document.getElementById("Participentfieldwrap"),
form = document.getElementsByTagName("form")[0],
ContestantNum = document.getElementById("circles"),
i, timer;
function createCircles(val) {
// Removing previous circles
while (form.firstChild) {
form.removeChild(form.firstChild);
}
for(i = 0; i < val; i++) {
var clone = participantsField.cloneNode(true);
clone.id = "Participentfieldwrap_" + i;
clone.querySelector("input").id = "Color_" + i;
clone.querySelector("circle").id = "cir_" + i;
form.appendChild(clone);
}
}
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
createCircles(ContestantNum.value);
}, 800);
});
</script>
</body>
</html>
答案 1 :(得分：1)
首先，您要使用相同的 ID 创建多个圈子。 HTML中的ID在整个页面上是唯一的。如果您创建了许多具有相同cir ID的圈子，那么当您执行
document.getElementById('cir');
您只会获得一个ID为cir的元素（您可以在方法名称中看到elemenT而非elemenTS。
关于color ID的相同内容，您创建了多个ID。请改为使用class关键字，而不是
document.getElementByID()
使用类似
的内容document.getElementsByClassName('Color');
您可以相应地为他们提供cir1，cir2等和color1，color2等ID，然后从输入ID中获取这些ID，并找到一个具有相同编号的圆圈