-5

I know, there are many threads covering this topic. BUT I didn't figure out yet, why the console is still showing the error.

The Plan
When I click on input#submit, I want main_jobBot.js to switch from index.html to https://www.google.de/.

Summary
I am trying to call the function change by the btn.onclick event.
It works fine, when I place the OnClick Event inside of the <input> tag.
But when I place it directly into the main_jobBot.js, I get the following Error:

ERROR MESSAGE:

Uncaught TypeError: Cannot set property 'onclick' of null at main_jobBot.js:7


I have...

  • ...checked the link to the main_jobBot.js.
  • ...tried to move the script to the end of the index.html in order to make sure, every element was loaded, that the main_jobBot.js might need.
  • ...tried to rename all my components to make sure, there is no default variable or method, I accidentally used.
  • ...double checked the code for typing errors.


Note: I am an absolute beginner to Javascript as well as to Stackoverflow!


MAIN_JOBBOT.JS and INDEX.HTML

/* main_jobBot.js */

let btn = document.getElementById("submit");

function change() {
  location.replace("https://www.google.de/");
}

btn.onclick = change;
<!-- index.html -->

<input type="submit" value="Let J.A.B. find the Job!" id="submit">
</input>




FINAL EDIT: Now I've got it! I had to remove the # AND move the script to the End of the HTML file!

MC Kosar
  • 1
  • 2
  • 1
    Just remove `#` character from `document.getElementById("#submit")`. It should work. – Tân Jan 05 '20 at 04:14
  • I removed it and tried it again, but it still doesn't work. – MC Kosar Jan 05 '20 at 04:17
  • What *doesn't work* mean? Any error? – Tân Jan 05 '20 at 04:19
  • Nothing changed. The console is showing me the same error as before: ```Uncaught TypeError: Cannot set property 'onclick' of null at main_jobBot.js:7``` – MC Kosar Jan 05 '20 at 04:21
  • Note - `input` element is a `self-closing` tag. i:e `` – random Jan 05 '20 at 04:24
  • Is the `MAIN_JOBBOT.JS` file loaded before the `input`? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959) – adiga Jan 05 '20 at 04:27
  • @adiga Yes, it is. But like I said I tried to move it to the end. But it makes no difference in my case. – MC Kosar Jan 05 '20 at 04:29
  • Check the link in previous comment. Either wrap the the code in `window.onload = function() { let btn = ... }` or move the file to the bottom – adiga Jan 05 '20 at 04:30
  • Either your selector is wrong, or you're running the Javascript too early. Both of those situations (and their fixes) are described in the canonical question. – CertainPerformance Jan 05 '20 at 04:37
  • Thank You guys for all Your answers, but I read this post and tried the solutions, which are described there. Sadly none of them worked out for me. That's why I wanted to present my individual problem. – MC Kosar Jan 05 '20 at 04:42

1 Answers1

-1

Any character used when refering to an element in your html using Javascript or any language at that can have an affect on how your code functions. Remove the # from the variable and this will work - oh and also, just a suggestion but when changing your url, try using:

location.href="https://www.google.de/"

Other than that this is fantastic, great work!

M_S_N
  • 2,271
  • 1
  • 12
  • 27
Ian Graham
  • 1