Returning Javascript Response from Conditional Logic as an Answer to HTML Quiz Input on the Same Page without Refresh or Navigating Away

Question

Beginner here! I'm coding a quiz website that takes in 10+ questions and returns a response to the user after receiving a combination of their answers. I included a much abbreviated version of the code below with placeholder text to help illustrate the issue.

The HTML form has a radio input which is related to javascript variables in a separate linked JS file in a onsubmit function called answers(). There are no correct/incorrect responses, only 50+ unique responses depending on the user input combo. The function declares the answer to each question using let, then 50+ conditional logic statements pass the answer variables to get a result.

Thankfully the quiz works! It successfully returns the correct unique response after a user inputs and submits. The only problem is I want to answer to display in a container at the bottom of the page onsubmit, and instead it sends it to a new page where the text is isolated without styling or context and navigates away from the quiz page. I am returning the result to the user with a document.write() method, but I've also tried document.getElementById('id').innerHTML = result and the .textContent method as well. The innerHTML and textContent methods have returned nothing, and the document.write will only return the result on a separate page.

Does anyone know how I can return the unique result as a response to the user at the bottom of the webpage after the quiz? I want it to be in a container that is hidden until the quiz is submitted and it appears and is populated with the result after they press submit. I am new to coding, so I greatly appreciate any and all help! Thank you! :)

let commentLine2 = "Hello world!";


function answers()
        {
          let Answer_Q2 = document.querySelector('input[name="Answer_Q2"]:checked').value;
          
          let Answer_Q3 = document.querySelector('input[name="Answer_Q3"]:checked').value;
          
          let Answer_Q4 = document.querySelector('input[name="Answer_Q4"]:checked').value;
  
  
          
if (Answer_Q3 == "No" && Answer_Q4 == "No"){
    document.write(commentLine2);};
  }

<form onsubmit="answers();">

  <div>

  <fieldset>
  
  <!--Question 1 textbox not considered in quiz results-->
  <legend>Question 1: What's is your name?</legend>
  <input type="text">
  
<legend>Grouping 1</legend>
<h3>Question 2: _______?</h3>
<div class="input-group mb-3">
<input type="radio" id="Option 1" name="Answer_Q2" value="Option 1" >
<label for="Option 1">Option 1</label><br>
<input type="radio" id="Option 2" name="Answer_Q2" value="Option 2" >
<label for="Option 2">Option 2</label><br>
<input type="radio" id="Option 3" name="Answer_Q2" value="Option 3" >
<label for="Option 3">Option 3</label><br>
<input type="radio" id="Option 4" name="Answer_Q2" value="Option 4" >
<label for="Option 4">Option 4</label><br>
  <label class="input-group-text" for="Answer_Q2"></label>
</div> 


<div>
<h3>Question 3: _______?</h3>
<div class="input-group mb-3">
  <input type="radio" id="No" name="Answer_Q3" value="No">
<label for="No">No</label><br>
<input type="radio" id="Yes" name="Answer_Q3" value="Yes">
<label for="Yes">Yes</label><br>
  <label class="input-group-text" for="Answer_Q3"></label>
</div> 
</div>
</fieldset>


<fieldset>
<legend>Grouping 2</legend>
<h3>Question 4: ________?</h3>
<div class="input-group mb-3">
  <input type="radio" id="Yes" name="Answer_Q4" value="Yes">
  <label for="Yes">Yes</label><br>
  <input type="radio" id="No" name="Answer_Q4" value="No">
  <label for="No">No</label><br>
  <label class="input-group-text" for="Answer_Q4"></label>
</div>
</fieldset>


<input type="Submit" id="btn-form" value="What's my result?">
</fieldset>

</form> 



<fieldset class="answer-container">
<div>
  <p id ="answer-Block"></p>
</div>
</fieldset>

Answer 1

if (Answer_Q3 == "No" && Answer_Q4 == "No"){
    document.write(commentLine2);};
}

document.write(commentLine2) would overwrite everything in the page and replace it with the contents of commentLine2. instead you should select the output container #answer-Block and put the response there:

if (Answer_Q3 == "No" && Answer_Q4 == "No"){
    let answerBlock = document.getElementById('answer-Block');
    answerBlock.textContent = commentLine2;
}

it would also help if you triggered the function on click of the submit button instead of on submission of the form itself (if you're not sending it to a server backend anyway), so modify your html like so:

<form onsubmit="event.preventDefault()">

and then on the button like so:

<input type="Submit" onclick="answers()" id="btn-form" value="What's my result?">