如何在Javascript global中创建一个函数到我的html

Question

First, I appreciate any direction given.... Let me preface this by saying, I am learning Javascript and HTML.

My problem is that I am trying to call my function to update audio time like so:

<audio id="track" preload="auto" type="audio/mpeg" ontimeupdate="displayTime(this)">
            <source src="mp3/mysong.mp3" type="audio/mpeg">
            Unsupported audio format!
        </audio>

My function is in the Javascript IFFE function:

$(document).ready(function () {
 ... /*Global Variables*/

 ...

 function displayTime(event) {

            sec = Math.floor(event.duration);
            min = Math.floor(sec / 60);
            min = min >= 10 ? min : '0' + min;
            sec = Math.floor(sec % 60);
            sec = sec >= 10 ? sec : '0' + sec;


            ct_sec = Math.floor(event.currentTime);
            ct_min = Math.floor(ct_sec / 60);
            ct_min = ct_min >= 10 ? ct_min : '0' + ct_min;
            ct_sec = Math.floor(ct_sec % 60);
            ct_sec = ct_sec >= 10 ? ct_sec : '0' + ct_sec;


            document.getElementById('ticker').innerHTML = ct_min + ":" + ct_sec + "-" + min + ":" + sec;

        }



});

Can anyone advise on why I get the error function displayTime(this) not defined? I also tried using window.myFunction to try to make it global to the dom ... to no avail.

Answer 1

because it's not visible outside the scope of the function.

After the declaration assign the reference of the function to the global object

window.displayTime = displayTime;

Answer 2

Anything in the document.ready handler will be put inside of that function's scope. Thus, if you want the function to be declared global from within the scope, you need to declare it in the global scope, and then you may use it with the window. prefix.

$(document).ready(function () {
 ... /*Global Variables*/
window.displayTime = function (event) { ... }
});

Usage:

<button onclick="window.displayTime()">test</button>

Answer 3

除了使函数成为全局函数之外，您还可以通过JavaScript附加事件侦听器，如下所示：

$('#track').on('timeupdate', displayTime);