Play audio files when buttons are clicked in Simon Says function playGreen(){
       var audio = document.getElementById("audioG");
       audio.play();
                 }
  function playRed(){
       var audio = document.getElementById("audioR");
       audio.play();
                 }
  function playYellow(){
       var audio = document.getElementById("audioY");
       audio.play();
                 }
  function playBlue(){
       var audio = document.getElementById("audioB");
       audio.play();
                 }


It will function as is.. but it seems like I should be able to reduce the four function's into one with a variable? can I get some guidance on that, along with any other pointers too.. just starting on the pseudo logic for the rest of the javascript.

  &lt;div class="gameWrapper"&gt;
    &lt;div class="backPlate"&gt;
      &lt;div class="pushPad green" onclick="playGreen()" &gt;
        &lt;audio preload="auto"  id="audioG" data-pad="1"&gt;      &lt;!-- upper left --&gt;
          &lt;source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"/&gt;
        &lt;/audio&gt;
      &lt;/div&gt;

      &lt;div class="pushPad red" onclick="playRed()" &gt;
        &lt;audio preload="auto"  id="audioR" data-pad="2"&gt;      &lt;!-- upper right --&gt;
          &lt;source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg"/&gt;
        &lt;/audio&gt;
      &lt;/div&gt;

      &lt;div class="pushPad yellow" onclick="playYellow()" &gt;
        &lt;audio preload="auto"  id="audioY" data-pad="3"&gt;      &lt;!-- lower left --&gt;
          &lt;source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg"/&gt;
        &lt;/audio&gt;
      &lt;/div&gt;

      &lt;div class="pushPad blue" onclick="playBlue()" &gt;
        &lt;audio preload="auto"  id="audioB" data-pad="4"&gt;      &lt;!-- lower right --&gt;
          &lt;source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg"/&gt;
        &lt;/audio&gt;
      &lt;/div&gt;
      &lt;div class="startCircle"&gt;

        &lt;h3&gt;Shall we&lt;br&gt;play a game?&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="centerCircle"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;


https://codepen.io/TurtleWolf/pen/awdoxQ?editors=1010
I recommend removing the inline onclick event handlers from your HTML document for a cleaner separation of markup and logic / JavaScript similarly to how you separate markup and style / CSS.

You can then add all event handlers with a few lines of code as follows:

document.querySelectorAll('.pushPad').forEach(pad =&gt; {
  let audio = pad.querySelector('audio');
  pad.addEventListener('click', event =&gt; audio.play());
});


A better design would probably have the data-pad attributes on the colored buttons and not on hidden &lt;audio&gt; elements, introduce a mapping between pad and audio source and leverage the web audio API instead. Using &lt;svg&gt; shapes instead of heavily styled &lt;div&gt;s for the UI might further simplify your markup.