CODEWITHSUNDEEP
javascripthtmlaudiolocal-storage
olivier
olivier

Reputation: 2645

function doesn't get called

My play() function doesn't get called. I really don't know why.

I have the following code:

var mp = document.getElementById("mp3");
   function play() {
   mp.play();
   console.log("hello");
}

function scan() {
  cordova.plugins.barcodeScanner.scan(
    function(result) {
      if (result.text == "home") {
        var atHomeRepQR = '<div class="container-h"><div class="card"><div class="item item-text-wrap "><i class="icon ion-unlocked"></i> Diese Ansicht ist entsperrt.</div></div><button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>';
        save("atHomeSaveQR", atHomeRepQR);
      }
      if (result.text == "street") {
        var atStreetRepQR = '<div class="container-s"><div class="card"><div class="item item-text-wrap "><i class="icon ion-unlocked"></i> Diese Ansicht ist entsperrt.</div></div><button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>';
        save("atStreetSaveQR", atStreetRepQR);
      }
      if (result.text == "bern") {
        var atBernRepQR = '<div class="container-b"><div class="card"><div class="item item-text-wrap "><i class="icon ion-unlocked"></i> Diese Ansicht ist entsperrt.</div></div><button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>';
        save("atBernSaveQR", atBernRepQR);
      }
      if (result.text == "bahnhof") {
        var atBahnhofRepQR = '<div class="container-ba"><div class="card"><div class="item item-text-wrap "><i class="icon ion-unlocked"></i> Diese Ansicht ist entsperrt.</div></div><button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>';
        save("atBahnhofSaveQR", atBahnhofRepQR);
      }
      if (result.text == "atelier") {
        var atAtelierRepQR = '<div class="container-at"><div class="card"><div class="item item-text-wrap "><i class="icon ion-unlocked"></i> Diese Ansicht ist entsperrt.</div></div><button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>';
        save("atAtelierSaveQR", atAtelierRepQR);
      }

    },
    function(error) {
      alert("Scanning failed: " + error);
    }
  );
}

The syntax 

<button onclick="play()" class="button button-positive btn">Play</button></div><audio id="mp3"><source src="video/ping.mp3" type="audio/mpeg"></audio>

is correct when you ask me.

What's my mistake?

Upvotes: 3

Views: 157

Answers (3)

rishikesh tadaka
rishikesh tadaka

Reputation: 483

I think, your javascript code is before body tag. Hence in 'mp' element is not getting. So move your javascript code after body tag i.e. after rendering your html.

Upvotes: 0

MTCoster
MTCoster

Reputation: 6145

It's possible that your mp variable is being initialized before #mp3 is parsed. You should wrap any static code like that in a document.ready block so that its execution is deferred until completion of the page load.

Ideally, this would be achieved using jQuery:

var mp;
$(document).ready(function() {
    mp = document.getElementById("mp3");
});

In it's absence, this will suffice for most modern browsers (see this answer):

var mp;
document.addEventListener("DOMContentLoaded", function(event) { 
    mp = document.getElementById("mp3");
});

Upvotes: 1

olivier
olivier

Reputation: 2645

I had to place mp into the function play() like this: 

   function play() {
   var mp = document.getElementById("mp3");
   mp.play();
}

Thanks to mplungjan!

Upvotes: 0

Related Questions