Output paragraph to web page depending on whether a user input answer is true or false

Question

I want to make an application with 3 questions, each with 2 buttons: yes and no. I want to output a different paragraph in response, depending on whether the answer was true or false (not an alert message!). How do I proceed??

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tegne med Javascript</title>
    <script>

    function oppstart () {
           function hs(){
         document.getElementById('utskrift').onclick = "riktig";
       }
       function hu(){
       document.getElementById('utskrift').onclick = "feil";
     }
       function ss(){
         document.getElementById('utskrift1').onclick = "riktig";
       }
       function su(){
         document.getElementById('utskrift1').onclick = "feil";
       }
       function ts(){
         document.getElementById('utskrift2').onclick = "riktig";
       }
       function tu(){
         document.getElementById('utskrift2').onclick = "feil";
     }
    }

    </script>
    </head>

    <body>
    jeg har hode
    <p id="utskrift"></p>
    <button type="submit" id="hs">Sann</button>  <button type="submit" 
    id="hu">USann</button>
    <br>
    <br>


    <p id="utskrift1"></p>
    jeg liker Skyrim   <button type="submit" id="ss">Sann</button>  <button 
    type="submit" id="su">USann</button>
      <br>
        <br>


        <p id="utskrift2"></p>
    jeg heter Tarzan   <button type="submit" id="ts">Sann</button>  <button 
    type="submit" id="tu">USann</button>

   </body>

I'm not clear on what you mean by the messaging determining whether the answer is true or false. Do you mean you want the program to check if the answer is true or false, then output a different message for each of these two conditions? — Peter David Carter, Jul 04 '17 at 17:09
You may find the answer to this question helpful https://stackoverflow.com/questions/34714152/comparing-strings-in-an-if-statement — Peter David Carter, Jul 04 '17 at 17:12
You may also wish to take a look at this: https://www.w3schools.com/jsref/prop_html_innerhtml.asp — Peter David Carter, Jul 04 '17 at 17:16

score 1 · Accepted Answer · answered Jul 04 '17 at 17:21

Each question's Yes/No buttons will have a click event callback function that will check the answer given and deliver the correct output.

Don't use submit buttons for this since you aren't actually submitting form data anywhere, regular button types will do.

This can be optimized a bit by combining the 3 functions I'm showing below into a single one, but that will complicate the code beyond beginner level, so you may want to stick with this approach for now.

// Get references to all of the buttons
var q1P = document.getElementById("utskrift1");
var q1Sann = document.getElementById("hs");
var q1Usann = document.getElementById("hu");

var q2P = document.getElementById("utskrift2");
var q2Sann = document.getElementById("ss");
var q2Usann = document.getElementById("su");

var q3P = document.getElementById("utskrift3");
var q3Sann = document.getElementById("ts");
var q3Usann = document.getElementById("tu");

// Set up each set of buttons to invoke a validation function when they are clicked
q1Sann.addEventListener("click", q1Validate);
q1Usann.addEventListener("click", q1Validate);

q2Sann.addEventListener("click", q2Validate);
q2Usann.addEventListener("click", q2Validate);

q3Sann.addEventListener("click", q3Validate);
q3Usann.addEventListener("click", q3Validate);

// Validation functions
function q1Validate (evt) {
  var message = "";

  // Test which button was clicked and populate the appropriate paragraph accordingly
  if(evt.target === q1Sann){
    message = "Correct!";
  } else {
    message = "Incorrect!";
  }
  
  // Update the paragraph with the message
  q1P.textContent = message;
}

function q2Validate (evt) {
  var message = "";

  // Test which button was clicked and populate the appropriate paragraph accordingly
  if(evt.target === q2Sann){
    message = "Correct!";
  } else {
    message = "Incorrect!";
  }
  q2P.textContent = message;
}

function q3Validate (evt) {
  var message = "";

  // Test which button was clicked and populate the appropriate paragraph accordingly
  if(evt.target === q3Sann){
    message = "Correct!";
  } else {
    message = "Incorrect!";
  }
  q3P.textContent = message;
}

p { color: blue; }

<div>
    jeg har hode
    <button type="button" id="hs">Sann</button>
    <button type="button" id="hu">USann</button>
    <p id="utskrift1"></p>
</div>

<div>
    jeg liker Skyrim   
    <button type="button" id="ss">Sann</button>
    <button type="button" id="su">USann</button>
    <p id="utskrift2"></p>    
</div>

<div>
    jeg heter Tarzan   
    <button type="button" id="ts">Sann</button>  
    <button type="button" id="tu">USann</button>
    <p id="utskrift3"></p>
</div>

Thank you! Trying to make it work myself. Got a little error Uncaught TypeError: Cannot read property 'addEventListener' of null at the first addEventLister? maybe that entire section goes wrong for me, not sure. But you did what I wanted to do. Cant just make it work on my own. — Red Shark, Jul 04 '17 at 17:33
You must make sure that all of the JavaScript code is placed just before the closing of the body tag (
). That way all of the HTML has been read into memory before the JavaScript tries to access it — Scott Marcus, Jul 04 '17 at 17:35
could you also show to do this with one function instead of 3? — DCR, Jul 04 '17 at 17:37
@DCR that would require a complete rewrite and be much more complex than it is now. I don't have time to do that now, but it would involve the questions and answers being stored in an array and then having each set of buttons be grouped together as well — Scott Marcus, Jul 04 '17 at 17:45

Output paragraph to web page depending on whether a user input answer is true or false

1 Answers1