JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<div>
  <h2 id="prompt">
  You come across a fork in the road. Do you go left or right?
  </h2>
  
    <div id="leftAndRightbuttons">
      <button type="button" onclick="goLeft()">Go Left</button>
      <button type="button" onclick="goRight()">Go Right</button>
    </div>
    
    <div id="riverOptions" style="display: none">
      <button type="button" onclick="swimAcross()">Swim Across</button>
      <button type="button" onclick="startOver()">Turn Around</button>
    </div>
    
    <button type="button" id="startOverButton" onclick="startOver()" style="display: none">START OVER</button>
    
</div>

<script>
//Left and right buttons:
function goLeft() {
	document.getElementById("prompt").innerText = "You come across a river.";
  document.getElementById("leftAndRightbuttons").style.display = "none";
  document.getElementById("riverOptions").style.display = '';
}
function goRight() {
	document.getElementById("prompt").innerText = "You come across a bog.";
  document.getElementById("leftAndRightbuttons").style.display = "none";
  
  var x = 2;
  
  if(x == 2){
  	alert();
  }
  
}
//River options:
function swimAcross()
{
	document.getElementById("prompt").innerText = "You drowned. Game Over.";
  document.getElementById("riverOptions").style.display = 'none';
  document.getElementById("startOverButton").style.display = '';
}

function startOver()
{
	document.getElementById("prompt").innerText = "You come across a fork in the road. Do you go left or right?";
  document.getElementById("leftAndRightbuttons").style.display = '';
  document.getElementById("riverOptions").style.display = "none";
  document.getElementById("startOverButton").style.display = 'none';
}



</script>