Javascript is not working in HTML file

Question

I have read through the available links on this topic and they haven't helped.

I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.

At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.

This is menu.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layout.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="contact.js"></script>
        <script src="preparePage.js"></script>
    </head>

    <body>
        <a id="infoButton" class="infoButton" href="info.html"></a>
        <a id="bodyButton" class="bodyButton" href="body.html"></a>
        <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
        <a id="leaveButton" class="leaveButton" href="leave.html"></a>
        <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
    </body>

    <footer>
    </footer>
</html>

And preparePage.js, which gets rid of the menu and loads world.html:

function preparePage() {
    document.getElementById("box").style.backgroundImage = "none";
    $("#infoButton").fadeOut("slow");
    $("#bodyButton").fadeOut("slow");
    $("#leaveButton").fadeOut("slow");
    $("#contactButton").fadeOut("slow");
    $("#box").load("world.html", function enter() {
        $("#enterButton").fadeOut("slow");
    });
}

And last but not least, world.html:

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript">
        function wut() {
            window.alert("owo");
        }
        </script>
    </head>

    <body onload="wut(); return false;">
        mhfkhgfhtfjhfjj<br><br>
        <canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
    </body>

    <footer>
    </footer>
</html>

EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="layout.css">
        <link rel="stylesheet" type="text/css" href="menu.css">
    </head>

    <body onload="openGame(); return false;">
        <div id="cloud"></div>
        <div id="box" class="box"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="openGame.js"></script>
    </body>

        <footer>
        </footer>
</html>

And openGame.js, which changes the shape of #box and loads menu.html:

    function openGame() {
        $("#cloud").fadeOut("fast");
        $("#box").animate({
            height: '750px',
            width: '1700px',
            top: '100px',
            left: '100px',
            padding: '0px'
        });
        $("#box").load("menu.html");
        document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
    }

menu.html and world.html are already within #box. #box is on a page called launchpad.html, and I have ANOTHER script called openGame.js which changes #box's size and loads menu.html. — chladnefazole
– chladnefazole, Commented Aug 7, 2016 at 21:24
Then please edit your question and add this information. The code you provide in the question should be enough to be able to reproduce the problem. — trincot
– trincot, Commented Aug 7, 2016 at 21:30

Gregory Wolf · Accepted Answer · 2016-08-07 21:49:35Z

I would use JQuery for the on-click events, and also make sure that all of the element id's that you reference in your script are present in the page. Another thing to check is that your scripts are loading properly, the letter casing of the file name is important on Linux servers.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="contact.js"></script>
    <script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>

Javascript:

    $( document ).ready(function() {
      $( "#enterButton" ).click(function() {
        document.getElementById("box").style.backgroundImage = "none";
        $("#infoButton").fadeOut("slow");
        $("#bodyButton").fadeOut("slow");
        $("#leaveButton").fadeOut("slow");
        $("#contactButton").fadeOut("slow");
        $("#box").load("/zalun/VkCyH/app.html", function enter() {
          $("#enterButton").fadeOut("slow");
        })
     })
  });

Live example: https://jsfiddle.net/ucjs77L8/

trincot · Accepted Answer · 2016-08-08 07:21:48Z

0

Apart from the obvious fact that you don't have an element with the id box, please realise that the jQuery load method will not trigger the onload callback that you have defined in world.html. So you'd need to call that yourself.

So fix two things:

define box, e.g.
```
<div id="box"></div>
```

call wut(), from menu.html:

$("#box").load("world.html", function enter() {
    wut();
    $("#enterButton").fadeOut("slow");
});

The onload= in world.html has no effect when loaded like this, because to the browser there is only one document, which already has loaded. So, there is no second load event triggering.

Alternatively you could just add a script in world.html, near the end just before the closing </body> tag, which will run:

<script>
    wut();
</script>

edited Aug 8, 2016 at 7:21

answered Aug 7, 2016 at 21:28

trincot

357k38 gold badges282 silver badges338 bronze badges

3 Comments

chladnefazole Over a year ago

Thank you, this worked! So if I load HTML with jQuery, it won't necessarily call the JavaScript I have in that file? Would it be possible for me to find more information on why this is in an article somewhere?

trincot Over a year ago

jQuery will execute JavaScript with its load method, so the wut function is defined. But it is never called, because it would only get called when the document loads (it is tied with onload). Yet, that event does not get triggered, because the document (which is the whole content, not only world.html) has already loaded. I add this info to the answer.

trincot Over a year ago

Too bad you removed the acceptance mark 7 years later. Was there a problem with this answer?

Collectives™ on Stack Overflow

Javascript is not working in HTML file

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related