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">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
     html {
      font-size: 10px;
      background: url( bottom;
      background-size: cover;
    body,html {
      height: 100vh;
      margin: 0;
      padding: 0;
      font-family: sans-serif;

  text-align: center;
  padding: 10px 0;
  color: white;
  font-size: 50px;
  letter-spacing: 2px;
  margin-top: 50px;
  display: table;
  margin: auto;
  border: 3px solid orange;
  padding: 20px;
  text-transform: uppercase;
  font-size: 50px;
  color: white;

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

  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;

  display: block;
  font-size: 4rem;
  color: white;
  text-transform: uppercase;
  color: orange;
  font-size: 1.2rem;
  letter-spacing: 2px;
  border: 3px solid orange;
  transform: scale(1.1);
    <title>key sound game</title>
      <div class="container">
            <h1 class="main-heading">MASTER HOME ROW</h1>
      <div class="container">
            <div id="random-letter" class="random-letter">
   <div class="container">
      <div class="keys">
            <div data-key="65" class="key">
                <span class="sound">clap</span>
            <div data-key="83" class="key">
                    <span class="sound">hihat</span>
           <div data-key="68" class="key">
                <span class="sound">kick</span>
          <div data-key="70" class="key">
                <span class="sound">openhat</span>
          <div data-key="71" class="key">
                <span class="sound">boom</span>
          <div data-key="72" class="key">
                <span class="sound">ride</span>
          <div data-key="74" class="key">
                <span class="sound">snare</span>
          <div data-key="75" class="key">
                <span class="sound">tom</span>
          <div data-key="76" class="key">
                <span class="sound">tink</span>
          <div data-key="186" class="key">
                <span class="sound">click</span>

<!---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>

        function removeTransform(e){
            if(TransitionEvent === 'transform')return;

        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 

            randomLetter.innerHTML = randomLetterArray[random]; 

            if(!audio) return; 

            audio.currentTime = 0;


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

            window.addEventListener('keydown', playSound);



comments powered by Disqus