Need help getting hello world app to work

Question

I am trying to figure out how to get javascript to work with html in a separate file so that I can follow this tutorial https://www.w3schools.com/howto/howto_css_modals.asp and I'm having trouble getting my alert to pop up.

Here is my code.

So far I've only been able to get a button that doesn't do anything.

var hellobutton = document.getElementById("hello");
hellobutton.onclick = function() {
alert("Hello World")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/main.css">
    <script type="text/javascript" src="/static/main.js"></script>
    <title>Title</title>
</head>
<body>
<div class="content-section">
<h1>Page</h1>
    <input type = "button" id="hello" value = "Say Hello" />
</div>
</body>
</html>

The code works here but not on my computer.

@Carcigenicate main.js:2 Uncaught TypeError: Cannot set property 'onclick' of null at main.js:2 — person, May 26 '19 at 21:22
You probably need to stick the JS in an `onload` listener for the page. It's trying to search for the `hello` button before it's created. — Carcigenicate, May 26 '19 at 21:24
@OldProgrammer I believe it is, the css and js files are both in the static folder but only the css file works. — person, May 26 '19 at 21:25
Open up a terminal, and type `python -m SimpleHTTPServer` in the directory. This will start a simple HTTP server, so you can serve static files correctly. I am assuming that is what is going on. Or just put the Javascript in the same HTML file ` — ABC, May 26 '19 at 21:26
@person if you've had a few gos at it, clear your browser cache and then load your html file again and re-run. Might just be a cached-file causing you problems — Rachel Gallen, May 26 '19 at 21:33
Put the JavaScript at the end of the page, not at the beginning. It executes in order and it can't find the element before the element exists. — David, May 26 '19 at 21:33
@David That did it, I put the script tag in the footer and it works now. — person, May 26 '19 at 21:39

DadiBit · Accepted Answer · 2019-05-28T17:45:50.270

It throws an error at line 2 because it couldn't find any element with that criteria already loaded and so it returns null at line 1. The value null is "nothing" so you can't set the onclick event of "nothing". One way to fix this is to load the js after the html element is loaded(no need to edit the js file):

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="/static/main.css">
  <title>Title</title>
 </head>
 <body>
  <div class="content-section">
  <h1>Page</h1>
  <input type = "button" id="hello" value = "Say Hello" />
  </div>
  <script type="text/javascript" src="/static/main.js"></script>
 </body>
</html>

Or also by calling the js code only when the document is loaded(no need to edit html file):

document.addEventListener('DOMContentLoaded', function() {
   var hellobutton = document.getElementById("hello");
   hellobutton.onclick = function() {
          alert("Hello World")
   }
}, false);

I found this code here.

Need help getting hello world app to work

1 Answers1