Question

我写了一些代码来运行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>

Answer 1

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

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

Answer 2

您可以使用for循环，但首先应该改进HTML中的一些内容：

th元素应该是tr元素的子元素
当您拥有的全部内容时，无需在p元素内使用td元素。只需将文本直接放在td中即可。
请勿将id值与后面的增量数字一起使用。这很少是一个好主意。而是使用不带该序列号的class。对于您使用的ans和display值，这是正确的。

在您的JavaScript代码中：

遍历具有上述class值的元素
在文本中动态放置文本时，请勿使用innerHTML，而应使用textContent，因为前者实际上是针对HTML编码的内容，而后者是针对纯文本的（您的情况是这样））。
您可以使用三元运算符来确定要输入“正确”还是“错误”

这是它的外观：

function go() {
    var answers = document.querySelectorAll(".answer"); // select by class instead of id
    var displays = document.querySelectorAll(".display");
    answers.forEach((answer, i) => displays[i].textContent = answer.checked ? "Correct" : "Wrong");
}

<table>
    <tr>
        <th>Q. No.</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <td>01</td>
        <td><input type="radio" value="button1" name="q1" class="answer"></td>
        <td><input type="radio" value="button2" name="q1"></td>
        <td><input type="radio" value="button3" name="q1"></td>
        <td><input type="radio" value="button4" name="q1"></td>
        <td><input type="radio" value="button5" name="q1"></td>
        <td class="display"></td>
    </tr>
    <tr>
        <td>02</td>
        <td><input type="radio" value="button1" name="q2" ></td>
        <td><input type="radio" value="button2" name="q2" class="answer"></td>
        <td><input type="radio" value="button3" name="q2"></td>
        <td><input type="radio" value="button4" name="q2"></td>
        <td><input type="radio" value="button5" name="q2"></td>
        <td class="display"></td>
    </tr>
</table>
<input type="button" onclick="go()" value="Submit">
<p id="demo1"></p>

现在，请注意，此页面的用户可以对其进行检查，并在按下按钮之前找出哪些答案是正确的。为了避免这种情况，您应该使用服务器端应用程序，该应用程序将对提交的答案进行验证。

重复相同功能的Javascript

2 个答案: