JSFiddle - React, Tailwind, and code Playground

by Tania Chanda

HTML

<div id="outer_box" onclick = "change()">
<div id ="red"></div>
<div id ="yellow"></div>
<div id ="green"></div>
</div>

CSS

#outer_box{
  width: 70px;
  height:150px;
  background:black;
}

#red{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: red;
}

#yellow{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: yellow;
}

#green{
  width: 50px;
  height:50px;
  margin: auto;
  border-radius: 50%;
  background: green;
}

JavaScript

var	state;
state = "green"

function change(){
	if (state=="green"){
  		state = "yellow";
      
  }
  else if (state== "yellow"){
  		state = "red";
      //state_def();
  }
  else{
  		state = "green";
      //state_def();
  }
console.log(state);
state_def();
}

function state_def(){
console.log("inside state def")
console.log(state);
	if (state == "green"){
  		document.getElementById("yellow").disabled = true;
      
  		//$("#yellow").prop('disabled',true);
      //$("#red").prop('disabled',true);
  }
  else if (state == "yellow"){
  		$("#green").prop('disabled',true);
      $("#red").prop('disabled',true);
  }
  else{
  		$("#yellow").prop('disabled',true);
      $("#green").prop('disabled',true);
  }
}