javascript - On Click Display Issue -

<div id="div4">    <button id="14" class="b1">bat</button>    <button id="15" class="b1">bowl</button> </div>  <div id="div3"> <p id="id4"></p><!-- score --> <p id="id5"></p><!-- balls --> </div> <div id="div1">     <button id="id7" class="c1">defence</button> </div> <script> document.getelementbyid("id14").onclick=function(){      document.getelementbyid("div4").style.display="none";      document.getelementbyid("div3").style.display="block";      document.getelementbyid("div1").style.display="block"; } </script> 

i have set display property of div1, div3 none , display property of div4 block in css, when click on bat, want div1, div3 appear , div 4 dissapear. when run above code not working.

<div id="div4">    <button id="14" class="b1">bat</button>    <button id="15" class="b1">bowl</button> </div>  <div id="div3"> <p id="id4">p id4</p> <p id="id5">p id5</p> </div> <div id="div1">     <button id="id7" class="c1">defence</button> </div> <script> var ct = 0;     document.getelementbyid("14").onclick=function(){      console.log('id 14 clicked');      document.getelementbyid("div4").style.display="none";      document.getelementbyid("div3").style.display="block";      document.getelementbyid("div1").style.display="block";  } </script> 

i recommand use console.log(); testing purpose helps debuging

eg: in above code console show "id 14 clicked", when user click on bat.

i have noticed in code using wrong id names: id14 , 14.