javascript - 需要将 javascript 值传递到 html 格式的建议，这样我就可以显示正确答案的成绩屏幕而不是 'document.write'

Question

下面是检查函数的代码，它将存储“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 代码中会更容易吗？无论如何，我需要能够将该分数连同名称一起存储到数据库中，所以也许用这些值填充数据库会更容易，然后使用选择查询或 Handlebars 标签将它们从那里取出(因为我有一个索引.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

听起来你想拿走 document.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.
})