Why does my if statement work if I manually change the checked state, but not when I click the button

Question

New here, and a complete javascript newbie!

Question. I'm trying to make a piano, just as an exercise, my first real attempt at javascript(mixing some jQuery too).

But why does the audio not change when I click on my button? It works if I manually delete/add the checked state to the button in the html, but not 'live.'

Any ideas? I'm completely stumped, I guess it's either something to do with the audio being stored in memory or something, or I have to clear the audio, but I'm not sure. Any help/advice would be greatly appreciated.

Thanks

Here's the relevant bits of code. and a link:

https://testing.jconnorgraphics.co.uk/pianjo/

function test() {
var C = document.getElementById("myAudioC");
var C3 = document.getElementById("myAudioC3");



if (document.getElementById('checked').checked){

$('.C').click(function() {
                      delete ('myAudioC3');
                      C.play();
                      C.currentTime = 0;
                      C.delete()
                    }
        )
}

else {

$('.C').click(function() {

                        C3.play();
                        C3.currentTime = 0;
                        C3.delete()
                      }
        )
};
};

test();



<div class="switch2" >
      <label class="switch">

              <input id="checked" type="checkbox" checked>
              <span class="slider round"></span>
      </label>
      <p>Audio</p>
</div>


<div class="naturalkey C">
     <p>C</p>
</div>



<audio  id="myAudioC">
    <source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
</audio>

<audio  id="myAudioC3">
    <source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
</audio>

Oh yeah, I'm creating it within Wordpress, hence the php bits, I don't think they are relevant to the problem though.

Answer 1

This code will first set the onclick event of .C to be function a, then according to the #checked click event it will dynamically set .C onclick event.

$(document).ready(function(){

  function a() {
      delete ('myAudioC3');
      C.play();
      C.currentTime = 0;
      C.delete()
    }

    function b() {
      C3.play();
      C3.currentTime = 0;
      C3.delete()
    }

    $('#checked').click(function(){
     let $this = $(this);

     if($this.attr('checked')) {
        $(".C").attr("onclick","a");  
        $this.attr('checked', false);
     } else {
       $(".C").attr("onclick","b");  
       $this.attr('checked',true)
     }
    });


    $(".C").attr("onclick","a");
});

Answer 2

Managed to get this working!

javascript

var C = document.getElementById("myAudioC");
var CC = document.getElementById("myAudioCC");

  function playAudioC() {
  var checked = document.getElementById("checked").checked;

  if ( checked == false) {
        C.play();
        C.currentTime = 0;
       }
       else
       {
      CC.play();
      CC.currentTime = 0;
      };

  };

html

  <audio  preload="auto" id="myAudioC">
  <source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
  </audio>

  <audio  preload="auto" id="myAudioCC">
  <source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
  </audio>

  <div onclick="playAudioC()" class="naturalkey">
      <p>C</p>
  </div>


<div class="switch2" >
  <label class="switch">

          <input id="checked" type="checkbox"  >
          <span class="slider round"></span>

  </label>
<p>Audio</p>
</div>

Next task is to turn all that in a loop, I've 12 keys to do, minimum, might take it further if I figure out the loop! Progress at least!