首页猿问如何使用 for 循环将重复的...

如何使用 for 循环将重复的 javascript 片段打印到 HTML 文档？

JavaScript

米脂 2023-07-29 15:31:52

自学业余爱好者试图创建一个工作表来帮助学生练习联立方程。我正在努力解决如何重复运行下面的代码以生成多个问题。我认为问题出在[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; }

查看完整描述

4 回答

海绵宝宝撒

TA贡献1809条经验获得超8个赞

您遇到的问题是您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;

}

反对回复 2023-07-29

犯罪嫌疑人X

TA贡献2080条经验获得超4个赞

试试这个，第一次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;

反对回复 2023-07-29

慕桂英546537

TA贡献1848条经验获得超10个赞

提取函数：

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}`;

不要使用全局变量。例如，您可以重用全局 i 进行循环和计算。

反对回复 2023-07-29

芜湖不芜

TA贡献1796条经验获得超7个赞

也许你应该研究以下结构：

//<![CDATA[

/* js/external.js */

let doc, htm, bod, nav, M, I, mobile, S, Q, rand, signedRand; // for use on other loads

addEventListener('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 load

const 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>

<head>

<title>Title Here</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

反对回复 2023-07-29

4 回答
0 关注
124 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何使用 for 循环将重复的 javascript 片段打印到 HTML 文档？

如何使用 for 循环将重复的 javascript 片段打印到 HTML 文档？

4 回答

添加回答