Повторение одного и того же функции Javascript

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>

Теперь, имейте в виду, что пользователь этой страницы может проверить ее и узнать, какие ответы являются правильными, прежде чем нажимать кнопку. Чтобы избежать этого, вам следует использовать приложение на стороне сервера, которое будет проверять отправленные ответы.