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

Question

这里是一名自学爱好者，试图创建一个工作表来帮助学生练习联立方程。 我正在努力解决如何重复运行下面的代码以生成多个问题。

我认为问题出在此处的[i]

document.getElementsByClassName("问题")[i].getElementsByClassName("部分")[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;

  }

Answer 1

您遇到的问题是您在 for 循环中将 i 引用为增量值，但随后将其值更改为计算值。

我将其更改为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;

  }