如何使用 for 循环将重复的 javascript 片段打印到 HTML 文档？
自学业余爱好者试图创建一个工作表来帮助学生练习联立方程。我正在努力解决如何重复运行下面的代码以生成多个问题。
我认为问题出在[i]这里
document.getElementsByClassName("question")[i].getElementsByClassName("part")[n].innerHTML
有人可以向我解释为什么使用 for 循环变量像这样重复写入 HTML 不起作用以及如何修复它吗？
非常感谢您的帮助。
<div class="question">
<ul>
<li class="part"></li>
<li class="part"></li>
<li class="part"></li>
</ul>
</div>
<div class="question">
<ul>
<li class="part"></li>
<li class="part"></li>
<li class="part"></li>
</ul>
</div>
for (i = 0; i < 5; i++){
var n = 12
x = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n))
y = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n))
z = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n))
m = 20
a = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
b = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
c = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
d = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
e = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
f = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
g = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
h = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
i = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m))
rhs1 = a*x + b*y + c*z
rhs2= d*x + e*y + f*z
rhs3 = g*x + h*y + i*z
document.getElementsByClassName("question")[i].getElementsByClassName("part")[0].innerHTML= a + " x + " + b + " y + " + z + " z = " + rhs1;
document.getElementsByClassName("question")[i].getElementsByClassName("part")[1].innerHTML= d + " x + " + e + " y + " + f + " z = " + rhs2;
document.getElementsByClassName("question")[i].getElementsByClassName("part")[2].innerHTML= g + " x + " + h + " y + " + i + " z = " + rhs3;
}
米脂浏览 125回答 4
4回答
-
海绵宝宝撒
您遇到的问题是您i在 for 循环中引用了增量值，但随后将其值更改为计算值。我把它改为cntr.for (cntr=0; cntr<5; cntr++){var n = 12 x = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n)) y = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n)) z = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n)) m = 20 a = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) b = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) c = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) d = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) e = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) f = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) g = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) h = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) i = (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*m)) rhs1 = a*x + b*y + c*z rhs2= d*x + e*y + f*z rhs3 = g*x + h*y + i*z document.getElementsByClassName("question")[cntr].getElementsByClassName("part")[0].innerHTML= a + " x + " + b + " y + " + z + " z = " + rhs1; document.getElementsByClassName("question")[cntr].getElementsByClassName("part")[1].innerHTML= d + " x + " + e + " y + " + f + " z = " + rhs2; document.getElementsByClassName("question")[cntr].getElementsByClassName("part")[2].innerHTML= g + " x + " + h + " y + " + i + " z = " + rhs3; } -
犯罪嫌疑人X
试试这个，第一次children[0]访问ul元素，第二次children[0 or 1 or 2]访问部分，也稍作更改，您可以设置一个等于 document.getElementsByClassName("question") 的变量，这样您就不需要每次都请求它questions = document.getElementsByClassName("question") questions[i].children[0].children[0].innerHTML = a + " x + " + b + " y + " + z + " z = " + rhs1; questions[i].children[0].children[1].innerHTML = d + " x + " + e + " y + " + f + " z = " + rhs2; questions[i].children[0].children[2].innerHTML = g + " x + " + h + " y + " + i + " z = " + rhs3; -
慕桂英546537
提取函数：function getTriplet(n) { return [0, 1, 2].map(_ => (Math.random()<0.5? 1:-1)*(Math.ceil(Math.random()*n)));}const [x, y, z] = getTriplet(12);console.log(x, y, z);动态生成 DOM：function getQuestion(parts) { const q = document.createElement('div'); q.classList.add('question'); const list = document.createElement('ul'); for (const part of parts) { const item = document.createElement('li'); item.classList.add('part'); item.innerText = part; list.appendChild(item); } q.appendChild(list); return q;}document.body.appendChild(getQuestion(['A', 'B', 'C']));document.body.appendChild(getQuestion(['1', '2', '3']));使用字符串模板插值以获得更清晰的效果：const a = 6;const b = 7;document.querySelector('sample').innerText = `${a} * ${b} = ${a * b}`;<sample></sample>不要使用全局变量。例如，您可以重用全局 i 进行循环和计算。 -
芜湖不芜
也许你应该研究以下结构：//<![CDATA[/* js/external.js */let doc, htm, bod, nav, M, I, mobile, S, Q, rand, signedRand; // for use on other loadsaddEventListener('load', ()=>{doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);mobile = nav.userAgent.match(/Mobi/i) ? true : false;S = (selector, within)=>{ var w = within || doc; return w.querySelector(selector);}Q = (selector, within)=>{ var w = within || doc; return w.querySelectorAll(selector);}rand = (min, max)=>{ let mn = min, mx = max; if(mx === undefined){ mx = mn; mn = 0; } return mn+Math.floor(Math.random()*(mx-mn+1));}signedRand = (min, max)=>{ return (Math.random() < 0.5 ? 1 : -1)*rand(min, max);}// magic under here - you could put below on a separate page using a load event - execept the end loadconst question = Q('.question');let n, x, y, z, a, b, c, d, e, f, g, h, i, xyz, p;for(let q of question){ n = 13; x = signedRand(n); y = signedRand(n); z = signedRand(n); n = 21; a = signedRand(n); b = signedRand(n); c = signedRand(n); d = signedRand(n); e = signedRand(n); f = signedRand(n); g = signedRand(n); h = signedRand(n); i = signedRand(n); xyz = S('.xyz', q); p = Q('.part', q); xyz.textContent = 'x = '+x+'; y = '+y+'; z = '+z+';'; p[0].textContent = a+'x + '+b+'y + '+c+'z = '+(a*x+b*y+c*z); p[1].textContent = d+'x + '+e+'y + '+f+'z = '+(d*x+e*y+f*z); p[2].textContent = g+'x + '+h+'y + '+i+'z = '+(g*x+h*y+i*z);}}); // end load//]]>/* css/external.css */*{ box-sizing:border-box; font-size:0; color:#000; padding:0; margin:0; overflow:hidden;}html,body,.main{ width:100%; height:100%;}.main{ background:#333; overflow-y:auto; padding:7px 10px;}.question>div{ color:#fff; font:bold 22px Tahoma, Geneva, sans-serif;}.question>.xyz{ background:#ccc; color:#000; padding:3px 5px; margin-bottom:2px; border-radius:1px;}.question{ padding:7px; border:1px solid #fff; border-radius:2px; margin-bottom:7px;}<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head><body> <div class='main'> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> <div class='question'> <div class='xyz'></div> <div class='part'></div> <div class='part'></div> <div class='part'></div> </div> </div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript