Variables de page onclick pour déclencher le clip audio

Question

J'ai besoin d'un peu d'aide avec un script pour déclencher un clip audio. Sur la page, il y a cinq icônes. Une fois que tous les cinq ont été cliqués, un clip audio est censé jouer. Voici l'image ci-dessous:

Voici le code html:

<div class="slide overlay-container" id="inter8"> 
    <div class="container content box-middle slide-back8"> 
     <audio data-autoplay> 
      <source src="audio/mars_glm_intro_slide05a.mp3" type="audio/mp3"> 
     </audio> 

     <div class="row zero"> 
      <div class="top txt-ctr"> 
       <div class="col-md-2 col-xs-2"> 
        <img src="images/Icon.png" style="width:150px; height:93px;"> 
       </div> 
      </div> 
     </div> 
     <!-- Icons and bars --> 
     <div class="row zero"> 
      <div class="mdl txt-ctr hght txt-white"> 
       <div class="col-md-2 col-xs-2 mar"></div> 

       <!-- Blue --> 
       <div class="col-md-2 col-xs-2 icn1 btn1" tabindex="1"> 
        <img src="images/Icon1.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 blu mar"> 
        Recruit and<br> 
        Onboard<br> 
        current and<br> 
        future Associates 
       </div> 
       <!-- Green --> 
       <div class="col-md-2 col-xs-2 icn2 btn2" tabindex="1"> 
        <img src="images/Icon2.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 green mar"> 
        Maximize<br> 
        Performance<br> 
        of Associates 
       </div> 
       <!-- Purple --> 
       <div class="col-md-2 col-xs-2 icn3 btn3" tabindex="1"> 
        <img src="images/Icon3.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 purple mar"> 
        Engage<br> 
        Associates 
       </div> 
       <!-- Orange --> 
       <div class="col-md-2 col-xs-2 icn4 btn4" tabindex="1"> 
        <img src="images/Icon4.png" style="width:150px; height:93px;"> 
       </div> 
       <div class="col-md-2 col-xs-2 orange mar"> 
        Develop<br> 
        Associates 
       </div> 
       <!-- Yellow --> 
       <div class="col-md-2 col-xs-2 icn5 btn5" tabindex="1"> 
        <div class="play"> 
         <img src="images/Icon5.png" style="width:150px; height:93px;"> 
        </div> 
       </div> 
       <div class="col-md-2 col-xs-2 yellow mar"> 
        All in the<br> 
        Mars Way 
       </div> 
      </div> 
     </div> 
     <div class="row page8-btm zero"> 
      <div class="btm"> 
       <h2>What is Great Line Management?</h2> 
       <p>Click the icons to learn more.</p> 
      </div> 
     </div> 
    </div> 
</div> 

Et voici le script:

var click1 = false; 
var click2 = false; 
var click3 = false; 
var click4 = false; 
var click5 = false; 

$('.btnClass').click(checkProg); 

function checkProg(){ 
    var thisBtn = $(this).attr('id'); 

    if(thisBtn == "btn1") { 
     click1 = true; 
    } else if (thisBtn == "btn2") { 
     click2 = true; 
    } else if (thisBtn == "btn3") { 
     click3 = true; 
    } else if (thisBtn == "btn4") { 
     click4 = true; 
    } else if (thisBtn == "btn5") { 
     click5 = true; 
    } 

    if(click1 == true && click2 == true && click3 == true && click4 == true && click5 == true) { 
     'audio/mars_glm_intro_slide05b.mp3' 
    } 
} 

Je ne reçois pas des erreurs de script. Alors, évidemment, je suis en train de négliger quelque chose. Toute aide serait très appréciée.

Answer 1

Il y a quelques problèmes avec votre code. Permettez-moi d'expliquer:

1) Vous êtes en train de traiter les clics pour les éléments avec une classe appelée .btnClass mais cette classe n'est affectée à aucun des éléments que vous affichez dans le code.

2) Vous vérifiez l'ID de l'élément sur lequel vous avez cliqué et recherchez l'ID d'attribut, mais la valeur btnX est ajoutée en tant que classe et non en tant qu'ID.

Ce code fait ce que vous avez besoin:

<div class="slide overlay-container" id="inter8"> 
     <div class="container content box-middle slide-back8"> 
     <audio data-autoplay> 
     <source src="audio/mars_glm_intro_slide05a.mp3" type="audio/mp3"> 
    </audio> 

      <div class="row zero"> 
       <div class="top txt-ctr"> 
        <div class="col-md-2 col-xs-2"><img src="images/Icon.png" style="width:150px; height:93px;"> 
        </div> 
       </div> 
      </div> 
      <!-- Icons and bars --> 
      <div class="row zero"><div class="mdl txt-ctr hght txt-white"> 
       <div class="col-md-2 col-xs-2 mar"> 

       </div> 

       <!-- Blue --> 
       <div class="col-md-2 col-xs-2 icn1" tabindex="1">     <img id="btn1" src="images/Icon1.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 blu mar">Recruit and<br> 
        Onboard<br> 
        current and<br> 
        future Associates 
       </div> 
       <!-- Green --> 
       <div class="col-md-2 col-xs-2 icn2" tabindex="1"> <img id="btn2" src="images/Icon2.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 green mar">Maximize<br> 
        Performance<br> 
        of Associates 
       </div> 
       <!-- Purple --> 
       <div class="col-md-2 col-xs-2 icn3" tabindex="1"><img id="btn3" src="images/Icon3.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 purple mar">Engage<br> 
        Associates 
       </div> 
       <!-- Orange --> 
       <div class="col-md-2 col-xs-2 icn4" tabindex="1"><img id="btn4" src="images/Icon4.png" style="width:150px; height:93px;" class="imgClicker"> 
       </div> 
       <div class="col-md-2 col-xs-2 orange mar">Develop<br> 
        Associates 
       </div> 
       <!-- Yellow --> 
       <div class="col-md-2 col-xs-2 icn5" tabindex="1"><div class="play"><img id="btn5" src="images/Icon5.png" style="width:150px; height:93px;" class="imgClicker"></div> 
       </div> 
       <div class="col-md-2 col-xs-2 yellow mar">All in the<br> 
        Mars Way 
       </div> 
       </div> 
      </div> 
      <div class="row page8-btm zero"><div class="btm"> 
       <h2>What is Great Line Management?</h2> 
       <p>Click the icons to learn more.</p></div> 

      </div> 
     </div> 
    </div> 

code JavaScript:

var click1 = false; 
    var click2 = false; 
    var click3 = false; 
    var click4 = false; 
    var click5 = false; 

    $('.imgClicker').click(checkProg); 

    function checkProg(){ 
    var thisBtn = $(this).attr('id'); 

    if(thisBtn == "btn1"){ 
     click1 = true; 
    }else if (thisBtn == "btn2"){ 
    click2 = true; 
    }else if (thisBtn == "btn3"){ 
    click3 = true; 
    }else if (thisBtn == "btn4"){ 
    click4 = true; 
    }else if (thisBtn == "btn5"){ 
    click5 = true; 
    } 

    if(click1 == true && click2 == true && click3 == true && click4 == true && click5 == true){ 
    alert('Play that song!'); 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'https://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); 
    audioElement.play(); 


    } 

} 

Il y a aussi un travail Fiddle here