Javascript 问卷代码改进

Question

我正在处理我最近使用 Bootstrap 4（只是为了让事情看起来更漂亮）提交的一份问卷调查。

作业要求我制作香草 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>

除了 bootstrap jQuery，这是我必须为作业生成的 JS：

document.getElementById('questionOne yes').onclick = function () {
    document.getElementById('q1answer').innerHTML = 'Yes';
};
document.getElementById('questionOne no').onclick = function () {
    document.getElementById('q1answer').innerHTML = 'No';
};
document.getElementById('questionTwo yes').onclick = function () {
    document.getElementById('q2answer').innerHTML = 'Yes';
};
document.getElementById('questionTwo no').onclick = function () {
    document.getElementById('q2answer').innerHTML = 'No';
};
document.getElementById('questionThree yes').onclick = function () {
    document.getElementById('q3answer').innerHTML = 'Yes';
};
document.getElementById('questionThree no').onclick = function () {
    document.getElementById('q3answer').innerHTML = 'No';
};
document.getElementById('questionFour yes').onclick = function () {
    document.getElementById('q4answer').innerHTML = 'Yes';
};
document.getElementById('questionFour no').onclick = function () {
    document.getElementById('q4answer').innerHTML = 'No';
};
document.getElementById('questionFive yes').onclick = function () {
    document.getElementById('q5answer').innerHTML = 'Yes';
};
document.getElementById('questionFive no').onclick = function () {
    document.getElementById('q5answer').innerHTML = 'No';
};

如您所见，它笨重而冗长……我非常感谢任何建议和示例！

Answer 1

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

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

（当然每个问题都要适当地做）

在 js 部分就是这样：

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");
        }
    };
});

几件事：

1. 在元素 id 中给出空格是一种练习。
   例如，我会将questionOne yes 更改为question-one-yes。

2. 我会将所有的 js 放在一个函数中，该函数将在加载窗口时调用，因此所有元素都会被渲染。
   即window.onload = function(){/*put your js code here*/}

3. 如果没有这样的功能，就不需要在按钮元素中放onclick=correct()