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>

除了引导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");
        }
    };
});

事物耦合：

这是在床上练习元素id中的给定空格。
例如，我将questionOne yes更改为question-one-yes。
我会将所有js放在一个函数中，该函数将在加载窗口时被调用，因此可以肯定地呈现所有元素。
即window.onload = function(){/*put your js code here*/}
如果没有这样的功能，则无需在按钮元素中放入onclick=correct()

Java脚本调查表代码改进

1 个答案: