Browsers don't recognize javascript function

Question

I am migrate a home site from Windows to Linux Debian and Nginx.The HTML code was working under Windows. Here the part of the HTML code, where I try to call a Javescript function, which is included in mairlist.js. The second call I have only implemented for debugging reasons.

        </div>
        <script type="application/javascript">setProgress({Setup.cTime}, {Setup.duration});</script>
        <script type="text/javascript" language="javascript">setProg({Setup.cTime}, {Setup.duration});</script>
</div>

And here is are the Javascript functions i mairlist.js

function setProg(cTime, tTime){
ctime++;    
};
function setProgress(cTime, tTime) {
var id = setInterval(prog, 1000);
var width = 0;
function prog() {
    cTime++;
    if(cTime > tTime){
        cTime = tTime;
    }
    var tNew = $("#sDur").val();
    if(tNew != tTime){
        tTime = tNew;
        cTime = $("#cTime").val();
    }
    width=cTime/tTime*100;
    $("#slider").val(width);
    var cMin = Math.floor(cTime / 60);
    var cSec = Math.floor(cTime % 60);
    var tMin = Math.floor(tTime / 60);
    var tSec = Math.floor(tTime % 60);
    
    var txt =  (cMin < 10 ? '0' +cMin : cMin) + ':' + (cSec < 10 ? '0' +cSec : cSec) + ' / ' +  (tMin < 10 ? '0' +tMin : tMin) + ':' + (tSec < 10 ? '0' +tSec : tSec);
    $('#pTime').html(txt);
    }
 };

And here the message from FF browser. Chrome shows a simular one. I thing that the calls in the HTML code are correct, because the browsers try to find the function. I also can see, that the browser has successful loaded mairlist.js. But what is wrong with the code in mairlist.js?

There seem to be quite a few things wrong with this code. Your code doesn't even reproduce the problem you report. Why don't you try to create a Minimal, Reproducible Example in a stack snippet? That way we can actually reproduce your problem, and help you further. I would also not nest functions, I know it is allowed in Javascript, but try to keep things simple at first. — KIKO Software
– KIKO Software, Commented 3 hours ago
I have everything deleted into mairlist.js. Only the function setProg is included. Still the same error! The Javascript file stands just before </body>. So I think it nothing to do with the Javascript code! — Georgio
– Georgio, Commented 2 hours ago
I suggest that you leave off the "type" and "language" attributes on <script> tags. They are not necessary unless you are trying to make the browser ignore a <script>. For normal JavaScript those attributes have not been necessary for a really long time. — Pointy
– Pointy, Commented 1 hour ago
This question is not a duplicate of stackoverflow.com/questions/9664282/… because the issue is that a function that was defined in a js file that was loaded(!) is not reachable. So the question is about scopes, not content types, hence the close reason was invalid. — Lajos Arpad
– Lajos Arpad, Commented 16 mins ago

Lajos Arpad · Accepted Answer · 2025-11-22 11:20:41Z

Since the js file is loaded as you claim, but your function is not being defined as you wanted, your function must be either conditionally defined or defined inside an event. For example, you may have something like this inside your js file:

if (1==2) {
    function myFunction() {
        alert("foo");
    }
}

<input type="button" value="click here" onclick="myFunction()">

Since the condition is not true, your function never gets defined, hence the error. Or you may have it inside an event:

function click1() {
    window.myFunction = function() {
        alert("clicked");
    }
}

<input type="button" value="click1" onclick="click1();">
<input type="button" value="click2" onclick="myFunction();">

as we can see, myFunction does not exist before click1 is triggered. So if you click on the second button first, then you get the error, but if you click on the first button first and then the second button, then it succeeds.

Or you may have it defined inside a block and then the outer scope does not see it. Here's the function defined inside a load event callback and it won't work from the outside:

window.addEventListener("load", function() {
    function myFunction() {
        alert("click triggered");
    }
});

<input type="button" value="click here" onclick="myFunction();">

So in order to fix your issue you will need to make sure that your function is visible where you intend to load it, study scopes. A quick fix for your case would be to make sure the function is in the global scope:

window.setProg = function(cTime, tTime){
ctime++;    
};
function setProgress(cTime, tTime) {
var id = setInterval(prog, 1000);
var width = 0;
function prog() {
    cTime++;
    if(cTime > tTime){
        cTime = tTime;
    }
    var tNew = $("#sDur").val();
    if(tNew != tTime){
        tTime = tNew;
        cTime = $("#cTime").val();
    }
    width=cTime/tTime*100;
    $("#slider").val(width);
    var cMin = Math.floor(cTime / 60);
    var cSec = Math.floor(cTime % 60);
    var tMin = Math.floor(tTime / 60);
    var tSec = Math.floor(tTime % 60);
    
    var txt =  (cMin < 10 ? '0' +cMin : cMin) + ':' + (cSec < 10 ? '0' +cSec : cSec) + ' / ' +  (tMin < 10 ? '0' +tMin : tMin) + ':' + (tSec < 10 ? '0' +tSec : tSec);
    $('#pTime').html(txt);
    }
 };

however, I would advise you to refactor your code to make such hacks unnecessary.

Collectives™ on Stack Overflow

Browsers don't recognize javascript function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related