Repetition of Same Function Javascript

Question

I wrote some codes to run a mcq test page but i think this is not the best codes. I am a beginner and this is my first project. I used same function three times. How can i use single(or less) function(s) to run the whole page???

I want to create 50 quiz in one page and I tried for loop but it didn't work.

<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

You can use a for loop, but first you should improve a few things in your HTML:

• th elements should be children of a tr element
• There is no need to use a p element inside a td element when that is all you have there. Just put text in the td directly.
• Don't use id values with an incremental number following. This is rarely a good idea. Instead use class without that sequence number. This is true for the ans and display values you have used.

In your JavaScript code:

• Iterate over the elements that have the above mentioned class values
• When placing text in your document dynamically, don't use innerHTML, but textContent, as the first is really for HTML encoded content, while the latter is for plain text (which is your case).
• You can use the ternary operator for deciding to put "Correct" or "Wrong"

Here is how it could look:

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>

Now, be aware that the user of this page can inspect it and find out which answers are the correct ones before pressing the button. To avoid this, you should involve a server sided application, which would do the verification of submitted answers.

Answer 2

pass your variables as parameters, and reuse the same function

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