Why is my javascript src not loading in HTML?

Question

As of now, I am making a simple no internet dinosaur game that everyone is familiar with using HTML, JS and CSS. I have been working my way through it and I have gotten everything working for the past few hours. All of a sudden, my buttons weren't working giving me the error: Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick I tried changing the functions of the buttons and the IDs but none of it worked. My conclusion is that my script.js file isn't loading with the HTML file for whatever reason but the .css file is. The following code is the HTML.

    <div id="game">
        <div id="character"></div>
        <div id="block"></div>  
    </div>
    <div>
        <button class="btn btn-secondary" id="button" onclick="start()">Start</button> 
        <button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
    </div>

</body>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</html>

The code below is the code for either function.

function start() {
    document.getElementById("button").innerHTML = 'Jump'
    button.setAttribute( "onclick", "jump()")
    block.classList.add("movement")
}

function pause() {
    pauseStatus = true
}

I don't know what the problem might be. I haven't made any changes to the file paths or anything and I can't think of how to fix the problem. I've tried putting the src path both in the body and outside of the body in the HTML and it hasn't worked.

Don’t do `button.setAttribute( "onclick", "jump()")`. Use `button.addEventListener("click", jump);` instead. The dev tools provide a **Network** tab. Please confirm: Is the resource _found_ (e.g. HTTP 200 response)? If not, which _actual URL_ is requested? Please [validate your HTML](https://html5.validator.nu/) — elements after `
` are invalid. Where is `jump` defined? If this is not the full `script.js`, then make sure you provide a [mre]. Possible cause: [Function is not defined - uncaught referenceerror](https://stackoverflow.com/q/5067887/4642212). — Sebastian Simon, Mar 17 '21 at 07:07
Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Mar 17 '21 at 07:12
In addition to the instructions above. If the console still shows "start is not defined" you should check the path of file script.js, because I tested code with editors online it works probably — Kieu Trung, Mar 17 '21 at 07:17
The structure of your html page is not correct. Should be inside the body tag, or in the header, based on what you want to achieve. — Roelof Briers, Mar 17 '21 at 07:53

DreamTeK · Answer 1 · 2021-03-17T08:43:21.587

You should try moving your script tag inside your body.

    <div id="game">
        <div id="character"></div>
        <div id="block"></div>  
    </div>
    <div>
        <button class="btn btn-secondary" id="button" onclick="start()">Start</button> 
        <button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
    </div>

    <p id="paused"></p>
    <p id="score"></p>
    <script src="script.js"></script>
</body>
</html>

Javascript

You should also be mindful that lines of Javascript should terminate with a semicolan.

function start() {
    document.getElementById("button").innerHTML = 'Jump';
    button.setAttribute( "onclick", "jump()");
    block.classList.add("movement");
}

function pause() {
    pauseStatus = true;
}

It would also be wise to take note of Sebastians suggestion and use addeventlistener for event handling.

button.addEventListener("click", jump);

Why is my javascript src not loading in HTML?

1 Answers1