我希望在运行该功能时,在每个年龄段内添加一个带有单独盒子的盒子。我尝试通过拆分innerHTML并在agebox部分使用for循环来实现它,这样它每次都会循环并创建一个新的年龄框,而不是每次都创建一个完整的外部框,就像你尝试循环整个事情一样。我认为这会起作用,但现在它为每个循环创建了一个年龄框,但它放在外框之外,我无法弄清楚如何让它在外框内循环。如果我删除循环并只创建一个innerHTML,那么我手动制作的年龄框就在外框中,所以我假设在实际拆分innerHTML时存在问题。提前致谢!!
function Age(gender){
if (gender!==undefined){
el1 = document.getElementById('userdata');
el1.innerHTML += gender +"<br>";
}
el1 = document.getElementById('farespage');
el1.innerHTML += "<div id=\"outerbox\">";
for(var i=13; i<=18; i++){
el1.innerHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
el1.innerHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
}
答案 0 :(得分:3)
您需要将输出内容存储为字符串,然后将其附加到DOM。否则,div将自动关闭。
el1 = document.getElementById('farespage');
output = "<div id=\"outerbox\">"; //initialize output string
//build output string
for(var i=13; i<=18; i++){
output +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
output += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
el1.innerHTML = output; //output to DOM
答案 1 :(得分:1)
该行
el1.innerHTML += "<div id=\"outerbox\">";
实际上正在制作
<div id="outerbox"></div>
因为大多数浏览器会自动关闭HTML标记。
您应该将所有HTML写入字符串缓冲区,然后通过一个大调用附加它;例如:
function Age(gender){
if (gender!==undefined){
el1 = document.getElementById('userdata');
el1.innerHTML += gender +"<br>";
}
el1 = document.getElementById('farespage');
// Magic begins here
var yourHTML = "";
yourHTML += "<div id=\"outerbox\">";
for(var i=13; i<=18; i++){
yourHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
yourHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
el1.innerHTML += yourHTML;
}
这样做的好处是只触摸一次DOM而不是7次(这通常是一件好事)。