How to change div based on keyboard events

I am trying to build an experiment in which participants select a picture then they will be displayed with their selection. After this, they can proceed to the next trial by pressing space key.

So I am trying to implement this on HTML but could not succeed it.

I got

 .Trials{     display: none;       }   .Questions{              display:none;          }      </b>    <button href='#' id="Start"> Start the experiment </button>    <script>        function ShowFirstTrial(){        $('#Trial1').show();        $('#Start').hide();        }        $('#Start').click(ShowFirstTrial);  </script>  

and

 <script >        document.onkeydown =function(event){          if (event.keyCode ==37 ){              $('#Trial').hide()              ++CurTrial;              $('#QuestionA').show()              CurQuestionB++;;          }          if (event.keyCode == 39){              $('#Trial').hide()              ++CurTrial;              $('#QuestionB').show()              CurQuestionA++;          }      }  </script>    <script>        document.body.onkeyup = function(e){      if(e.keyCode == 32){          $('#QuestionA'+ CurQuestionA).hide();          CurQuestionA++;          $('#Trial'+CurTrial).show();      }  }    </script>  

But it's not working. I had this code for mouse clicks again for a similar experiment. I don't know why I cannot update the Trials and Questions. During the first trial the code stops working.

https://stackoverflow.com/questions/66947131/how-to-change-div-based-on-keyboard-events April 05, 2021 at 08:53AM