function doesn't get called

Question

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?

please check in console, Is there any error? what is mp.play(); — saikumar, Jan 25 '16 at 12:27
Try `document.getElementById("mp3").play()` - you cannot assign mp=something before something exists. — mplungjan, Jan 25 '16 at 12:27
Open a browser, load the page containing this code, open the "developper tools" (F12 for Chrome), look at the console tab, and tell us what error you get. — Pierre, Jan 25 '16 at 12:27
Your `var mp=...` has to be executed after the audio tag has rendered — mplungjan, Jan 25 '16 at 12:30
@mplungjan so i can place the `mp` in the `play()` function? — olivier, Jan 25 '16 at 12:32
Make sure function play() { } is written out side the $(document).ready ( function () { }); — Punit Gajjar, Jan 25 '16 at 12:34
change the name of your 'function play()' to something like 'function playit()'. It may work — sarath, Jan 25 '16 at 12:39
Kindly check `var mp = document.getElementById("mp3");` is working or not, I assume you are not getting the element to that variable `mp` — sarath, Jan 25 '16 at 13:02
I have tried 'document.getElementById("mp3")` the same, but can't able to make it right — sarath, Jan 25 '16 at 13:12
@olivier , Jquery May be a solution. I haven't tested.. Please Check — sarath, Jan 26 '16 at 08:15

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

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");
});

edited May 23 '17 at 12:31

Community

1
1

answered Jan 25 '16 at 12:37

MTCoster

5,307
3
25
46

My apologies, I didn't think to expand the comments before answering – MTCoster Jan 25 '16 at 12:43

score 0 · Answer 2 · answered Jan 25 '16 at 12:36

0

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

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

Thanks to mplungjan!

answered Jan 25 '16 at 12:36

olivier

2,505
6
30
55

Or define the mp as a global var and assign it after load – mplungjan Jan 25 '16 at 12:42

score 0 · Answer 3 · answered Jan 25 '16 at 12:39

0

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.

answered Jan 25 '16 at 12:39

rishikesh tadaka

473
5
18

function doesn't get called

3 Answers3