how do i know last random number in javascript or grab the current value of inner html before its assigned line?

yash Source

Hi I am new to Javascript .I want to have this a function which updates the inner html randomly, but I don't want this to update when the entered key code is invalid. For that I need the last random number or I need to grab the current value in the inner html, which I can't grab before its declaration line. How can I make sure that someone has entered the key which is displayed in the inner html and if not then don't run the code below.

<!DOCTYPE html>
     <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <style>
     html {
      font-size: 10px;
      background: url(http://i.imgur.com/b9r5sEL.jpg) bottom;
      background-size: cover;
    }
    body,html {
      height: 100vh;
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

.container{
  text-align: center;
  padding: 10px 0;
}
.main-heading{
  color: white;
  font-size: 50px;
  letter-spacing: 2px;
  margin-top: 50px;
}
.random-letter{
  display: table;
  margin: auto;
  border: 3px solid orange;
  padding: 20px;
  text-transform: uppercase;
  font-size: 50px;
  color: white;
}
.keys{

  width: 80vw;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}
.key{
  width: 10rem;
  border: 0.4rem solid black;
  border-radius: 0.3rem;
  padding: 0.5rem 1rem;
  margin: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.07s ease-in-out;
}

kbd{
  display: block;
  font-size: 4rem;
  color: white;
}
.sound{
  text-transform: uppercase;
  color: orange;
  font-size: 1.2rem;
  letter-spacing: 2px;
}
.playing{
  border: 3px solid orange;
  transform: scale(1.1);
}
</style>
    <title>key sound game</title>
</head>
<body>
      <div class="container">
            <h1 class="main-heading">MASTER HOME ROW</h1>
      </div>
      <div class="container">
            <div id="random-letter" class="random-letter">
                  a
            </div>
      </div>
   <div class="container">
      <div class="keys">
            <div data-key="65" class="key">
                <kbd>A</kbd>
                <span class="sound">clap</span>
            </div>
            <div data-key="83" class="key">
                    <kbd>S</kbd>
                    <span class="sound">hihat</span>
           </div>
           <div data-key="68" class="key">
                <kbd>D</kbd>
                <span class="sound">kick</span>
          </div>
          <div data-key="70" class="key">
                <kbd>F</kbd>
                <span class="sound">openhat</span>
          </div>
          <div data-key="71" class="key">
                <kbd>G</kbd>
                <span class="sound">boom</span>
          </div>
          <div data-key="72" class="key">
                <kbd>H</kbd>
                <span class="sound">ride</span>
          </div>
          <div data-key="74" class="key">
                <kbd>J</kbd>
                <span class="sound">snare</span>
          </div>
          <div data-key="75" class="key">
                <kbd>K</kbd>
                <span class="sound">tom</span>
          </div>
          <div data-key="76" class="key">
                <kbd>L</kbd>
                <span class="sound">tink</span>
          </div>
          <div data-key="186" class="key">
                <kbd>;</kbd>
                <span class="sound">click</span>
          </div>
        </div>

   </div>
<!---this will of course not work-->
    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/clap.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>
    <audio data-key="186" src="sounds/click.mp3"></audio>





 <script>
        function removeTransform(e){
            if(TransitionEvent === 'transform')return;
            e.target.classList.remove('playing');
        }

        function playSound(e){
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            const keyEffect = document.querySelector(`.key[data-key="${e.keyCode}"]`);
            const randomLetter = document.getElementById('random-letter');
            const randomLetterArray = ['a','s','d','f','g','h','j','k','l',';'];
            const randomToKeyCode = [65,83,68,70,71,72,74,75,76,186];
            const random = Math.floor(Math.random() * 10);

            // if (e.keyCode !== randomToKeyCode[last-random])return;

            //so that randomletter.innerhtml do not change and code below do not 
            //execute

            randomLetter.innerHTML = randomLetterArray[random]; 

            if(!audio) return; 

            audio.currentTime = 0;
            audio.play();

            keyEffect.classList.add('playing');
        }

        const keys = Array.from(document.querySelectorAll(".key"));
        keys.forEach(key => {key.addEventListener('transitionend', 
    removeTransform)});

            window.addEventListener('keydown', playSound);
        </script>

</body>
</html>
javascriptrandominnerhtmlexecutionhoisting

Answers

comments powered by Disqus