Javascript Java脚本调查问卷代码改进

我正在做一项作业，我最近使用Bootstrap4（只是为了让事情看起来更漂亮）提交了一份调查问卷

任务要求我制作香草JS

我得到了相对较好的结果，但是我想看看是否有人能够证明我所做的是一种更有效的方式。我想提高代码的效率

这就是我所做的：

<div class="jumbotron">
    <h1>Simple Questionarre</h1>
</div>
<div class="container">
    <b class="question">Obama was a president of the US:</b>
    <div>
        <button onclick="correct()" class="btn btn-primary" id="questionOne yes" type="button">Yes</button>
        <button onclick="incorrect()" class="btn btn-primary" id="questionOne no" type="button">No</button>
    </div>
    <b class="question">Steve Jobs was the inventor of Oracle:</b>
    <div>
        <button onclick="incorrect()" class="btn btn-primary" id="questionTwo yes" type="button">Yes</button>
        <button onclick="correct()" class="btn btn-primary" id="questionTwo no" type="button">No</button>
    </div>
    <b class="question">The sun is 147 million km from the moon:</b>
    <div>
        <button onclick="correct()" class="btn btn-primary" id="questionThree yes" type="button">Yes</button>
        <button onclick="incorrect()" class="btn btn-primary" id="questionThree no" type="button">No</button>
    </div>
    <b class="question">Tesla is the brand of a car fueled by Bio Fuel:</b>
    <div>
        <button onclick="incorrect()" class="btn btn-primary" id="questionFour yes" type="button">Yes</button>
        <button onclick="correct()" class="btn btn-primary" id="questionFour no" type="button">No</button>
    </div>
    <b class="question">In music, the fifth note above the third note is the Major 7th:</b>
    <div>
        <button onclick="correct()" class="btn btn-primary" id="questionFive yes" type="button">Yes</button>
        <button onclick="incorrect()" class="btn btn-primary" id="questionFive no" type="button">No</button>
    </div>
</div>
<hr>
<div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        See Results
    </button>
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Results</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <!-- Results -->
                    <p>Obama was a president of the US: Yes.</p>
                    <p>You said <span id="q1answer">nothing...</span></p>
                    <hr>
                    <p>Steve Jobs was the inventor of Oracle: No.</p>
                    <p>You said <span id="q2answer">nothing...</span></p>
                    <hr>
                    <p>The sun is 147 million km from the moon: Yes.</p>
                    <p>You said <span id="q3answer">nothing...</span></p>
                    <hr>
                    <p>Tesla is the brand of a car fueled by Bio Fuel: No.</p>
                    <p>You said <span id="q4answer">nothing...</span></p>
                    <hr>
                    <p>In music, the fifth note above the third note is the Major 7th: Yes.</p>
                    <p>You said <span id="q5answer">nothing...</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

---

正如你所看到的，它又粗又长。。。如果有任何建议和例子，我将不胜感激

回答您的问题：
您可以在HTML问题上添加更多标记，例如：

<button class="btn btn-primary question" answer-text="yes" answer-id="q1answer" type="button">Yes</button>

两件事：

在元素id中指定空格是一种床上练习。
例如，我会将

questionOne yes

更改为

questionOne yes

我会将所有js放在一个函数中，当加载窗口时将调用该函数，因此所有元素都会被呈现。
i、 e.

window.onload=function（）{/*将js代码放在这里*/}

如果没有这样的函数，则无需在按钮元素中放入

onclick=correct（）

---

我理解如何使用元素来检索答案，这是我喜欢的。虽然现在你已经有了答案，你会如何将答案应用到模态中的正确标记上？我不确定我是否理解你的问题“答案id”属性保存将保存答案的元素的id。该问题包含答案的id。当onclick发生时，id被提取并用于查找答案元素。

<button class="btn btn-primary question" answer-text="yes" answer-id="q1answer" type="button">Yes</button>

document.querySelectorAll("button.question").forEach(function(questionElement){
    questionElement.onclick = function() {
        var answerElement = document.getElementById(questionElement.getAttribute("answer-id"));

        // Make sure an answer element exists
        if (answerElement) {
            answerElement.innerHTML = questionElement.getAttribute("answer-text");
        }
    };
});