OnClick .push

I’m using a constructor to map the onclicks to their audio sources. I keep hearing I should replace the on click’s with event handlers, but there’s something about them that are just not ‘clicking’ for me yet… I can make it work by copying someone else’s code, but I don’t understand what’s going on.

What I’m stuck on now, is where to .push to the player_sInput [array], should I add it to the onclick in the HTML? Is there a syntax for adding it to the constructor? Does placing it outside of the AudioBlack()function effect the scope?

some of the comments at the end of the javascript are pseudo code planned next, but not written yet.

<body>
  <div id="container">
    <div id="green" class="pad" onclick="audioPad['green'].play()">
      <audio preload="auto" id="audioGreen" <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper left -->

    <div id="red" class="pad" onclick="audioPad['red'].play()">
      <audio preload="auto" id="audioRed" <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper right -->

    <div id="yellow" class="pad" onclick="audioPad['yellow'].play()">
      <audio preload="auto" id="audioYellow" <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower left -->

    <div id="blue" class="pad" onclick="audioPad['blue'].play()">
      <audio preload="auto" id="audioBlue" <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower right -->

    <div id="startTapper" class="pad" onclick="audioBlack()">
      <div>
        <span id="simon_sSequence">Shall we</span>
        <span id="player_sInput">play a game?</span>
      </div>
      <!-- end of "display" -->
    </div>
    <!-- end of "startTapper" -->
  </div>
  <!-- end of "container" -->
</body>
const audioPad = {
  green: document.getElementById("audioGreen"),
  red: document.getElementById("audioRed"),
  yellow: document.getElementById("audioYellow"),
  blue: document.getElementById("audioBlue"),
  black: document.getElementById("audioBlue")
};

var simon_sSequence = [];

function audioBlack() {
  //clear player's input for this turn
  var player_sInput = [];
  //generate a random number
  //push random number to simon_sSequence
  simon_sSequence.push(Math.floor(Math.random() * 4 + 1));
  console.log(simon_sSequence);
  $("#simon_sSequence").text(simon_sSequence);
  $("#player_sInput").text(player_sInput);
  //for each in the array set time interval(300ms);
  //dipslay hover effect
  //play pad sound
  var audio = document.getElementById("audioBlue");
  audio.play();
}

https://codepen.io/TurtleWolf/pen/YQWNXB?editors=0010

Not sure what you mean with constructor here… but you are right that inline onclick listeners should be avoided. If you then want to push the index of the clicked pad to an array, you might do this like so:

const playerInput = document.getElementById('player_sInput')
const pads = document.querySelectorAll('.pad')
const player_sInput = []

// Convert the pad list to an array so that 
// we can iterate over it using .forEach()
Array.from(pads).forEach((pad, index) => {
  
  // Get the associated audio element nested
  // in the pad-div
  const audio = pad.querySelector('audio')
  
  // Add a click listener to each pad which
  // will play the audio, push the index to 
  // the user input array, and update the span
  pad.addEventListener('click', () => {
    audio.play()
    player_sInput.push(index)
    playerInput.textContent = player_sInput
  })
})

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.