重复使用相同的函数Javascript

我写了一些代码来运行mcq测试页面，但我认为这不是最好的代码。 我是一个初学者，这是我的第一个项目。 我用了三次相同的函数。 如何使用单个（或更少）函数运行整个页面

我想在一个页面中创建50个测验，我尝试了循环，但没有成功

<table>
    <th>Q. No.</th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>

    <tr><td>01</td>
    <td><input type="radio" value="button1" id = "ans1" name="q1"></td>
    <td><input type="radio" value="button3" name="q1"></td>
    <td><input type="radio" value="button3" name="q1"></td>
    <td><input type="radio" value="button3" name="q1"></td>
    <td><input type="radio" value="button3" name="q1"></td>
    <td><p id="display1"></p></td>
    </tr>
    <tr>
    <td>02</td>
    <td><input type="radio" value="button2"name="q2" ></td>
    <td><input type="radio" value="button1" name="q2" id = "ans2"></td>
    <td><input type="radio" value="button1" name="q2"></td>
    <td><input type="radio" value="button1" name="q2"></td>
    <td><input type="radio" value="button1" name="q2"></td>
    <td><p id="display2"></p></td>
    </tr>
</table>
<input type="button" onclick= "go1() , go2()" value="Submit">
<p id="demo1"></p>

<script>
function go1() {
    var x = document.getElementById("ans1");
    if (x.checked) {
        document.getElementById("display1").innerHTML = "Correct";
    } else {
        document.getElementById("display1").innerHTML = "wrong";
    }
}

function go2() {
    var y = document.getElementById("ans2");
    if (y.checked) {
        document.getElementById("display2").innerHTML = "Correct";
    } else {
        document.getElementById("display2").innerHTML = "wrong";
    }
}
</script>

问题：否。
1.
2.
3.
4.
5.
01

02


函数go1（）{
var x=document.getElementById（“ans1”）；
如果（x.checked）{
document.getElementById（“display1”）.innerHTML=“Correct”；
}否则{
document.getElementById（“display1”）.innerHTML=“错误”；
}
}
函数go2（）{
var y=document.getElementById（“ans2”）；
如果（y.勾选）{
document.getElementById（“display2”）.innerHTML=“Correct”；
}否则{
document.getElementById（“display2”）.innerHTML=“错误”；
}
}

将变量作为参数传递，并重复使用相同的函数

function go(ans,display) {
var x = document.getElementById(ans);
    if (x.checked) {
        document.getElementById(display).innerHTML = "Correct";
    } else {
        document.getElementById(display).innerHTML = "wrong";
    }
}

---

您可以使用

for

循环，但首先应该改进HTML中的一些内容：

• th

  元素应该是

  tr

  元素的子元素
• 如果

  td

  元素中只有

  p

  元素，则不需要在

  td

  元素中使用该元素。只需将文本直接放入

  td

• 不要将

  id

  值与后面的递增数字一起使用。这很少是个好主意。使用不带序列号的

  class

  。这适用于您使用的

  ans

  和

  显示值

在JavaScript代码中：

• 迭代具有上述

  类

  值的元素
• 在文档中动态放置文本时，不要使用

  innerHTML

  ，而要使用

  textContent

  ，因为前者实际上用于HTML编码的内容，而后者用于纯文本（这是您的情况）
• 您可以使用三元运算符来决定输入“正确”或“错误”

下面是它的外观：

函数go（）{ var answers=document.queryselectoral（“.answer”）；//按类而不是按id选择 var displays=document.queryselectoral（“.display”）； answers.forEach（（answer，i）=>显示[i].textContent=answer.checked？“正确”：“错误”）； }

问题：否。
1.
2.
3.
4.
5.
01
02

定义“没有工作”，您是如何做到的？除了字符串中的一个数字外，其他一切都是一样的。请查看页面。在执行此操作之前，请考虑您的数据及其结构。然后考虑如何存储和使用数据。这对您的示例很有用，但它不一定是一个很好的模式。如果你考虑到方法和你想要的结果，你有机会在这里学习。你是说使用函数参数“不一定是一个好的模式”。。。你在说什么？问题是“我三次使用同一个函数。如何使用单个（或更少）函数来运行整个页面？”显然，减少函数数量的最佳方法是参数化，而不是解决该问题的其他解决方案，也许你应该重新思考什么是好模式。我猜你跳过了这一部分（从一开始）我敦促他们考虑他们的数据及其结构，并将我的评论视为人身攻击。是的，您的功能将正常工作。他们应该这样做吗？不，你知道他们应该怎么做吗？考虑他们的数据及其结构，以便他们可以使用它来提出问题，检查选定的答案，并偏离使用硬编码元素ID识别答案的方向。所以，是的，你修正了他们确切的例子，但你没有帮助初学者的方法。