JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<h1>Is now a good time to get a dog?</h1>
<h2 id="qtext">Do you like to run a lot</h2>
<div id="testdiv"></div>
<form>
  <label><input type="radio" id="question1" value="option1" name="blah"> Option 1</label>
  <label><input type="radio" id="question2" value="option1" name="blah"> Option 2</label>
  <input type="button" value="Next" onclick="answerNext(event);">
</form>

JavaScript

function answerNext() {
  if (document.getElementById("question1").checked == true) {
    document.getElementById("qtext").innerText = "You chose the first option";
  } else if (document.getElementById("question2").checked == true) {
    document.getElementById("qtext").innerText = "You chose the second option";
  } else {
    document.getElementById("qtext").innerText = "You chose neither option";
    document.getElementById("testdiv").innerHTML = "<h1>You clicked next</h1>";
  }
}