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. — Nienaber, Aug 07 '16 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, Aug 07 '16 at 21:30

score 1 · Answer 1 · answered Aug 07 '16 at 21:49

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/apple-touch-icon@2.png?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-08T07:21:48.043

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 08 '16 at 07:21

answered Aug 07 '16 at 21:28

trincot

317,000
35
244
286

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? – Nienaber Aug 07 '16 at 21:37
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 Aug 08 '16 at 07:24

Javascript is not working in HTML file

2 Answers2

Linked