need advice with passing a javascript value into html format so i can show a grade screen of correct answers instead of 'document.write'

Question

below is the code for the check function that will store the value of the 'c' variable and the document.write will display it in a empty page. i have been trying to find a way to pass this into my html so i can create a grading screen and display the same line i have here into a html format but i cannot get the function or variable to pass through however i try.

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('You scored ' + c + ' 
and your average was ' + c/10*100 + '%')
}

below is the html code i tried but i don't understand how to export the function parameters

     Welcome
    
       document.write('You scored ' + c + 
'and your average was ' + c/10*100 + '%' ")
    
    
  

i know that this may not be part of the question or may be an additional step, but would it be easier to store that c value into a database and then pull from the database into the html code? i need to be able to store that score along with a name into a database anyways so maybe it would be easier to populate the database with the values and then take them out of there with a select query or handlebar tag (as i have a index.handlebar that i will be displaying the scores on with other data). sorry for the long question but i've been struggling with the database side so need to quickly solve these issues. Any help is greatly appreciated :)

Sorry for the long amounts of code but i wasn't sure what you needed to undertand what im trying to do. The code below saves the value within the radio button and the variable c auto-increments +1 and then the function at the bottom called "check3()" runs the increment for every value and then it runs the calculation. what i want to do is display that same statement calculation in the same page if needed but it will need to have the same css as the page of the current page.

  
    
      <!-- first set -->
      
        {{this.Question1}}               
        <!-- first choice -->
        Emacs

        <!-- second choice -->
        Notepad++

        <!-- third choice -->
        Vim

        <!-- fourth choice -->
      Bash

        next
    

    <!-- second set -->
    
        {{this.Question2}}
        <!-- first choice -->
        Nothing

        <!-- second choice -->
        
          Java Development Kit 1.8 or newer

        <!-- third choice -->
        Apache Maven

        <!-- fourth choice -->
        
          Jakarta Enterprise Edition web profile compliant server


        previous
        next
    



    <!-- Third set -->
    
        {{this.Question3}}
        <!-- first choice -->
        username and IP address

        <!-- second choice -->
        username and password

        <!-- third choice -->
        email address and password

        <!-- fourth choice -->
        username and email address

        previous
        next
    

    <!-- fourth set -->
    
        {{this.Question4}}
        <!-- first choice -->
        System

        <!-- second choice -->
        Local

        <!-- third choice -->
        User

        <!-- fourth choice -->
        Global

        previous
        next
    

    <!-- fifth set -->
    
        {{this.Question5}}
        <!-- first choice -->
        Junio C. Hamano

        <!-- second choice -->
        James Gosling

        <!-- third choice -->
        Linus Torvalds

        <!-- fourth choice -->
        Kohsuke Kawaguchi 

      
        previous
      
        Back to Question 1

      
    
    {{/each}}
    
    

Answer 1

It sounds like you want to take the document.write and display that on the screen.

function myFunction() {
//Create the HTML ELEMENT 
const msgDiv = document.createElement('h1');

// create the message you want to display
 msgDiv.innerHTML = `$ You scored {c} and you average was {c/10*100}%$`;

// 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.
})