需要将 JavaScript 值转换为 HTML 格式的建议，以便我可以显示正确答案的成绩屏幕而不是'document.write'

Question

是check函数的代码，它将存储'c'变量的值，document.write将在空页面中显示它。我一直在试图找到一种方法将其传递到我的html中，这样我就可以创建一个评分屏幕，并将我在这里的同一行显示为html格式，但无论我如何尝试，我都无法获得要传递的函数或变量。

function check() {
let c=0
const q1=document.quiz.question1.value
const q2=document.quiz.question2.value
const q3=document.quiz.question3.value
const q4=document.quiz.question4.value
const q5=document.quiz.question5.value
if(q1==='1') {
c++
}
if(q2==='1') {
c++
}
if(q3==='1') {
c++
}
if(q4==='1') {
c++
}
if(q5==='1') {
c++
}
document.write('<h1>You scored ' + c + ' 
and your average was ' + c/10*100 + '%</h1>')
}

下面是我尝试过的html代码，但我不明白如何导出函数参数

<section>
<h2> Welcome
<script type="text/javascript">
document.write('You scored ' + c + 
'and your average was ' + c/10*100 + '%' ")
</script>
</h2>
</section>

我知道这可能不是问题的一部分，也可能是一个额外的步骤，但将c值存储到数据库中，然后从数据库中提取到html代码中会更容易吗？无论如何，我需要能够将分数和名称一起存储到数据库中，这样也许用值填充数据库，然后用select查询或handlebar标记将它们取出会更容易(因为我有一个index.handlebar，我将在上面显示分数和其他数据(。很抱歉问了这么长的问题，但我一直在数据库方面挣扎，所以需要快速解决这些问题。非常感谢您的帮助：(

很抱歉代码太长了，但我不确定你需要在下面写什么，我想做什么。下面的代码将值保存在单选按钮中，变量c自动递增+1，然后底部的函数名为"；check3(("；为每个值运行增量，然后运行计算。如果需要的话，我想做的是在同一个页面中显示相同的语句计算，但它需要与当前页面的页面具有相同的css。

<main class='questionsContainer'>
<form name='quiz' id='quiz'>
<!-- first set -->
<section id='questions6' style="min-height: 190px">
<h3>{{this.Question1}}</h3>               
<!-- first choice -->
<h3><input type="radio" id="option1" name="question1" value="0">Emacs</h3>
<!-- second choice -->
<h3><input type="radio" id="option2" name="question1" value="0">Notepad++</h3>
<!-- third choice -->
<h3><input type="radio" id="option3" name="question1" value="1">Vim</h3>
<!-- fourth choice -->
<h3><input type="radio" id="option4" name="question1" value="0">Bash</h3><br>
<button style="position: absolute; bottom: 15px;" type='button' onclick="nextQuestion(6, 7)">next</button>
</section>
<!-- second set -->
<section id='questions7' style="min-height: 190px">
<h2>{{this.Question2}}</h2>
<!-- first choice -->
<h3><input type="radio" id="option1" name="question2" value="1">Nothing</h3>
<!-- second choice -->
<h3><input type="radio" id="option2" name="question2" value="0">
Java Development Kit 1.8 or newer</h3>
<!-- third choice -->
<h3><input type="radio" id="option3" name="question2" value="0">Apache Maven</h3>
<!-- fourth choice -->
<h3><input type="radio" id="option4" name="question2" value="0">
Jakarta Enterprise Edition web profile compliant server</h3><br>
<button style="position: absolute; bottom: 15px; left: 35%;" type='button' onclick="previousQuestion(7, 6)">previous</button>
<button style="position: absolute; bottom: 15px;" type='button' onclick="nextQuestion(7, 8)">next</button>
</section>

<!-- Third set -->
<section id='questions8' style="min-height: 190px">
<h2>{{this.Question3}}</h2>
<!-- first choice -->
<h3><input type="radio" id="option1" name="question3" value="0">username and IP address</h3>
<!-- second choice -->
<h3><input type="radio" id="option2" name="question3" value="0">username and password</h3>
<!-- third choice -->
<h3><input type="radio" id="option3" name="question3" value="0">email address and password</h3>
<!-- fourth choice -->
<h3><input type="radio" id="option4" name="question3" value="1">username and email address</h3><br>
<button style="position: absolute; bottom: 15px; left: 35%;" type='button' onclick="previousQuestion(8, 7)">previous</button>
<button style="position: absolute; bottom: 15px;" type='button' onclick="nextQuestion(8, 9)">next</button>
</section>
<!-- fourth set -->
<section id='questions9' style="min-height: 190px"style="min-height: 190px">
<h2>{{this.Question4}}</h2>
<!-- first choice -->
<h3><input type="radio" id="option1" name="question4" value="0">System</h3>
<!-- second choice -->
<h3><input type="radio" id="option2" name="question4" value="0">Local</h3>
<!-- third choice -->
<h3><input type="radio" id="option3" name="question4" value="1">User</h3>
<!-- fourth choice -->
<h3><input type="radio" id="option4" name="question4" value="0">Global</h3><br>
<button style="position: absolute; bottom: 15px; left: 35%;" type='button' onclick="previousQuestion(9, 8)">previous</button>
<button style="position: absolute; bottom: 15px;" type='button' onclick="nextQuestion(9, 10)">next</button>
</section>
<!-- fifth set -->
<section id='questions10' style="min-height: 190px">
<h2>{{this.Question5}}</h2>
<!-- first choice -->
<h3><input type="radio" id="option1" name="question5" value="0">Junio C. Hamano</h3>
<!-- second choice -->
<h3><input type="radio" id="option2" name="question5" value="0">James Gosling</h3>
<!-- third choice -->
<h3><input type="radio" id="option3" name="question5" value="1">Linus Torvalds</h3>
<!-- fourth choice -->
<h3><input type="radio" id="option4" name="question5" value="0">Kohsuke Kawaguchi</h3> <br>

<button style="position: absolute; bottom: 15px; left: 25%;"
type='button' onclick="previousQuestion(10, 9)">previous</button>

<button style="position: absolute; bottom: 15px; left: 35%;" type='button' 
onclick="nextQuestion(10, 6)">Back to Question 1</button>
<input style="position: absolute; bottom: 15px; right:20%;" type="button" 
value="Check Your Grade!" onclick="check3(check1, check2)">
</section>
{{/each}}
</form>
</main>

Answer 1

听起来你想获取文档.write并将其显示在屏幕上。

function myFunction() {
//Create the HTML ELEMENT 
const msgDiv = document.createElement('h1');
// create the message you want to display
msgDiv.innerHTML = `<span>$ You scored {c} and you average was {c/10*100}%</span>$`;
// Display that message by appending it to an HTML element
yourHTMLELEMENTWHEREYOUWANTITTODISPLAY.appendChild(msgDiv);

}

//call the function 
myFunction()
//add an eventlistener on function
button.addEventListener('click', myFunction)

You have your quiz wrapped in a form, so you can just add an add event listener on that element. That way when the quiz is at the end and when someone hits submit the other function to display the results can run. Also you want to have the form submit so that they can either click or hit enter so submit. 


form.addEventListener('submit' (e) => {
// this stops the page from submitting and going to another page
e.preventDefault();
// Add the code from up above. 
// You don't want your check function to be in this code because it will only run when the form is submitted and you don't want that.
})