javascript - 我的 JavaScript 测验结果没有样式，为什么？

Question

我制作了这个心理测验:

 <p>Q1: What do you think about XYZ?</p>
<input type="radio" name="group1" id="A1"> Agree strongly<br/>
<input type="radio" name="group1" id="E1"> Disagree very much<br/>
<p>Q1: What do you think about ABC?</p>
<input type="radio" name="group2" id="A2"> Agree strongly<br/>
<input type="radio" name="group2" id="E2"> Disagree very much<br/>
<button onclick="myFunction()">GET RESULTS</button>
<script>
counter = 0;
function myFunction() {
    if (document.getElementById('A1').checked){
    counter = counter - 2;
    } else if (document.getElementById('E1').checked) {
    counter = counter + 2;
    }
if (document.getElementById('A2').checked){
    counter = counter - 2;
    } else if (document.getElementById('E2').checked) {
    counter = counter + 2;
    }   
        if (counter > 0) {
        document.write("Its positive!");
        } else {
        document.write("Its negative!");
        }

}
</script>

单击“获取结果”按钮时，结果会正确显示，但未应用 CSS 样式。我该怎么做才能使结果显示在样式化的页面上？谢谢!

Answer 1

因为你使用了document.write。

当您使用 document.write 时，整个文档、头部、主体，所有内容都将替换为您所写的内容。因此，如果您使用它，您需要重新创建一个完整的文档。

标准建议适用:永远不要使用document.write()。改为了解 innerHTML(之后阅读 DOM API 的其余部分)。