JavaScript επεξήγηση

[Gunix]

Γεια σας φίλοι μου.

Θα ήθελα την βοήθεια σας παρακαλώ.

Σε αυτό εδώ κάνεις το εξής: Όταν ο χρήστης πατήσει την λέξη τεστ θα ακούσει ένα ήχο. Μετά αν πατήσει την εικόνα σταματάει ο ήχος από την πρόταση και παίζει ο ήχος στην εικόνα.

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1>
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">

Επειδή δεν καταλαβαίνω κάποια πράγματα θα ήθελα να εξηγήσετε λίγο την λογική της σας παρακαλώ δηλαδή πως λειτουργεί εδώ η JS.

var audio1 = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");
var whoIsPlaying = null; //Εδώ δίνει μια μεταβλητή και της εκχωρεί με null.



function clickOnH1() {


  /*Στην if τι ελέγχει το είδος ή κάτι άλλο? Δηλαδή στο Data types που έχω διαβάσει από το w3schools
  το null είναι object και τα '' είναι sting. Ισχύει αυτό που λέω? */
  if (whoIsPlaying != 'H1') {
    audio2.pause();
    audio1.play();

    whoIsPlaying = 'H1'; //Εδώ γιατί έβαλε ότι η μεταβλητή εκχωρείται με ''?
  }
}


function clickOnIMG() {


  if (whoIsPlaying != 'IMG') {


    audio1.pause();
    audio2.play();
    whoIsPlaying = 'IMG';
  }
}

[tsofras]

Αρχικοποιεί την whoIsPlaying με null .

Μετά στην clickOnH1 ελέγχει αν έχει τιμή (String όπως είπες) H1. Αν έχει θέτει την τιμή στην whoIsPlaying έτσι ώστε να γίνει πάλι κλήση της clickOnH1 να μην ξανατρέξει το μπλόκ του κώδικα.

Ακριβώς τα ίδια ισχύουν και για την clickOnIMG