Using script tags incorrectly (JavaScript platform game)

Question

Using script tags incorrectly (JavaScript platform game)

Currently, I am working on the 'create a platform game' project as outlined in Eloquent JavaScript, and I have encountered an issue related to script tags.

As per the instructions in the book, we are advised to showcase our level using:

<link rel="stylesheet" href="css/game.css">

<script>
 var simpleLevel = new Level(simpleLevelPlan);
 var display = new DOMDisplay(document.body, simpleLevel);
</script>

I attempted including this code snippet (along with an additional script tag for my platform.js file) into index.html, but the browser is not displaying anything. I am unsure of what mistake I might be making?

javascript html css

Answer 1

Answer №1

It's important to ensure that you are placing your scripts in the correct order:

<!DOCTYPE html>
<html>
    <head>
        Here is where you should include your scripts using <script src=...>
    </head>
    <body>
        ...
    </body>
    <script>
        This is where you should execute your script, ensuring that it requires the entire HTML page to be loaded first (for example, if you're using document.body).
    </script>
</html>

Scripts are executed in the order they appear on the page. If you are using document, you must wait until the entire page has loaded before executing: Either by placing your script at the end of the HTML, or by creating an initialization function in the HEAD and calling it from the body onload event:

    <head>
        <script>
            function myFunction(){...}
        </script>
    </head>
    <body onload="return myFunction()">
        ...
    </body>

Answer 2

It's important to ensure that you are placing your scripts in the correct order:

<!DOCTYPE html>
<html>
    <head>
        Here is where you should include your scripts using <script src=...>
    </head>
    <body>
        ...
    </body>
    <script>
        This is where you should execute your script, ensuring that it requires the entire HTML page to be loaded first (for example, if you're using document.body).
    </script>
</html>

Scripts are executed in the order they appear on the page. If you are using document, you must wait until the entire page has loaded before executing: Either by placing your script at the end of the HTML, or by creating an initialization function in the HEAD and calling it from the body onload event:

    <head>
        <script>
            function myFunction(){...}
        </script>
    </head>
    <body onload="return myFunction()">
        ...
    </body>

Answer 3

Answer №2

Ensure you add the external JavaScript file that you require in a distinct <script> element prior to your inline script!

Answer 4

Ensure you add the external JavaScript file that you require in a distinct <script> element prior to your inline script!

Using script tags incorrectly (JavaScript platform game)

Answer №1

Answer №2

Similar questions

Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

Creating multiple synchronous loops within a Vue component using JavaScript

Using Mongoose schema with a reference to an undefined 'ObjectID' data type

MVC Template with a Defective BootStrap

Creating a dynamic hyperlink variable that updates based on user input

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

Invoking WinJS.Binding.List.createFiltered with an asynchronous call to the predicate function

The PHP script is exhausting memory resources and triggering a fatal error

The jQuery gallery is experiencing some functionality issues

ajaxStop and ajaxStart not functioning as expected

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

I'm having some trouble with my middleware test in Jest - what could be going wrong?

Understanding Node.js document object

I have a brief snippet of JavaScript code that demonstrates how to access properties

A guide on applying color from an API response to the border-color property in an Angular application

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

Enable the execution of a function only once a specific period of time has elapsed

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

Issues with CodeIgniter paths causing disruption to CSS background-image declaration

When the browser tab icon does not appear, it is likely due to not responding to the GET /favicon.ico