首頁猿問如何使用 for 循環(huán)將重復的...

如何使用 for 循環(huán)將重復的 javascript 片段打印到 HTML 文檔？

JavaScript

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

自學業(yè)余愛好者試圖創(chuàng)建一個工作表來幫助學生練習聯(lián)立方程。我正在努力解決如何重復運行下面的代碼以生成多個問題。我認為問題出在[i]這里document.getElementsByClassName("question")[i].getElementsByClassName("part")[n].innerHTML有人可以向我解釋為什么使用 for 循環(huán)變量像這樣重復寫入 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條經(jīng)驗獲得超8個贊

您遇到的問題是您i在 for 循環(huán)中引用了增量值，但隨后將其值更改為計算值。

我把它改為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條經(jīng)驗獲得超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條經(jīng)驗獲得超10個贊

提取函數(shù)：

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);

動態(tài)生成 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} * $ = ${a * b}`;

不要使用全局變量。例如，您可以重用全局 i 進行循環(huán)和計算。

反對回復 2023-07-29

蕪湖不蕪

TA貢獻1796條經(jīng)驗獲得超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 關注
172 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何使用 for 循環(huán)將重復的 javascript 片段打印到 HTML 文檔？

如何使用 for 循環(huán)將重復的 javascript 片段打印到 HTML 文檔？

4 回答

添加回答

如何使用 for 循環(huán)將重復的 javascript 片段打印到 HTML 文檔？

如何使用 for 循環(huán)將重復的 javascript 片段打印到 HTML 文檔？