HTML file not pulling information from javascript file

Question

Image of code

I am currently doing "pre-work" for a bootcamp. I am trying to get my HTML to pull functions from my javascript file. When I use the "Follow Link" function it takes me to the correct file, it's just not pulling info to complete the function.

<script type="text/javascript" src="javascript/javascript.js"></script>

I am trying to figure out why exactly that script code isn't pulling the intended function from the file.

The path (And I hope I understand correctly) should lead directly to my javascript.js file within my javascript folder. I have one folder with the HTML file and my JS folder, within that is only one javascript.js file — Caleb Mattson, Oct 21 '19 at 02:30
@CalebMattson What do your browser's developer tools tell you? Also, Java doesn't have anything to do with JavaScript. My favorite saying I heard once, "Java is to JavaScript as Car is to Carpet." — Brad, Oct 21 '19 at 02:32
If there's a way to post a picture I took a screenshot of the HTML and javascript side by side to better show whats going on. — Caleb Mattson, Oct 21 '19 at 02:34
@Brad I am currently only doing prework for an upcoming course so I am not sure exactly what a Browser's developer tool is or how it works. Could you help me understand how to get that information to you? — Caleb Mattson, Oct 21 '19 at 02:35
@CalebMattson Sure! So, if you're using Chrome, push F12. That should bring up a whole panel that actually shows you what's happening behind the scenes. This is (should be) where you will spend most of your time debugging things. If you click "console", you'll see a list of errors and warnings, if there are any. That will usually point to the problem. Also, if you could post the contents of `javascript.js`, that'd be helpful. — Brad, Oct 21 '19 at 02:39
@CalebMattson Don't post screenshots of code... post your actual code. — Brad, Oct 21 '19 at 02:41
@CalebMattson Also, if this pre-work was assigned by this bootcamp, be very cautious. They're already starting you out with some bad practices. You generally don't want to use IDs for your elements, as they clutter up the global namespace in your scripts. We've had better methods of selecting elements in JavaScript for over a decade. Additionally, you don't typically want to use pixel sizes for most things. Better to use relative sizes like `em`. (For demonstration purposes, it's fine.) — Brad, Oct 21 '19 at 02:46
@Brad or my preferred comparison - "Java is to JavaScript as Ham is to Hamster." — Jon P, Oct 21 '19 at 02:59

score 0 · Answer 1 · answered Oct 21 '19 at 02:32

The script tag is to bring the javascript file that the page is going to use. This javascript file may contain function declaration, variable declarations and all other stuff.

For you if you want to redirect or get the function for the same then you should you some kind of auto complete tool in your IDE. It will check all the function from it and just give you the info for completing the function.

The given script tag will tag will make the function/code finder to look into which all files. It is same for css also.

score 0 · Answer 2 · answered Oct 21 '19 at 02:42

The issue here is that your JavaScript is running before the page has finished loading. Therefore, when your calls to document.getElementById happen, the buttons aren't even there yet.

Try this:

document.addEventListener('DOMContentLoaded', (e) => {
  // Put your existing code here
});

What this does is adds an event handler to the event, DOMContentLoaded, which fires when the document has been fully downloaded, parsed, and the DOM tree assembled and ready for manipulation via script. In the event handler, you can run your code.

score 0 · Answer 3 · answered Oct 21 '19 at 02:51

Kindly add the script reference below the close body tag. Your script contains the reference of the controls within the html page, So calling the script before the page load will not bind the event to the controls as the controls are not instantiated.

or

You can add your codes inside a function and call that function at the bottom of the page.

</body>
<script src="javacsript/javascript.js"></script>
</html>

HTML file not pulling information from javascript file

3 Answers3