D3 button that shows and hides text in a div

forked from hungvietdo's block: Button in D3

forked from VanBantam's block: D3 button that shows and hides text in a div

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    #text1.hidden {
      display: none;
    }
   #text2.hidden {
     display: none;
    }
    #text3.hidden {
      display: none;
    }
  </style>
</head>

<body>
  
	<button id="showhide" onclick()>Click me</button>
  <div id="text1" class="hidden">Text 1</div>
  <div id="text2" class="hidden">Text 2</div>
  <div id="text3" class="hidden">Text 3</div>
	
  <script type="text/javascript"> 
		
		var w = 300, h = 300;
		
		var color = 1;
		var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h);	
     
		d3.select("#showhide").on("click", function(){
				
			color = color + 1;
				
			if (color % 2) 
				{
					d3.select(this).text("Click me");
          d3.select("#text1").classed("hidden", true);
          d3.select("#text2").classed("hidden", true);
          d3.select("#text3").classed("hidden", true);
					//Add other code below here
				} 
			else 
				{
					d3.select(this).text("Reset");
         d3.select("#text1").classed("hidden", false);
          d3.select("#text2").classed("hidden", false);
          d3.select("#text3").classed("hidden", false);
					//Add other code below here 
				}
			});
		 </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js