-1

I'm trying to make Cookie Clicker for a class I'm taking, and I'm tripping up right at the beginning because of document.getElementById. Here's my html (the relevant bits).

<div id="cookiebox">
<input onclick="click()" type="image" src="images/cookie.jpg" class="cookie" />
</div>
<div id="cookieNumber"></div>

Then the corresponding javascript:

var cookies = 0;
function click() {
     cookies = cookies + 1;
     console.log(cookies);
     var test = document.getElementById("cookieNumber").innerHTML = cookies;
}

So what ends up happening is that I get a type error because it doesn't find the cookieNumber div and nothing happens. I'm well aware that this is a super newbie question, but if anyone could help me out with this I would greatly appreciate it.

EDIT: Fixed the issue with the document.getElementById. Still can't get the function to fire though from the input.

EDIT 2: Fixed everything. Thanks @j08691.

nijomemo
  • 1
  • 1
  • 1
    What exactly is the typeerror, they're often misread or misunderstood. – Kevin B Dec 07 '18 at 23:18
  • 3
    Name your function something other than `click`. https://stackoverflow.com/questions/4388443/javascript-function-name-cannot-set-as-click – j08691 Dec 07 '18 at 23:20
  • I'm going to add that you should avoid using the `onclick` attribute in your HTML as it can easily add confusion. In your JS I would create a `querySelector` to find the `cookie` class and add the onclick from there. `const cookie = document.querySelector('.cookie'); cookie.onclick = click();` for example. – Brandon Benefield Dec 07 '18 at 23:21
  • 1
    @KevinB Uncaught TypeError: Cannot set property 'innerHTML' of null – nijomemo Dec 07 '18 at 23:21
  • how are you including your script? – Vatsal Dec 07 '18 at 23:22
  • 1
    I suspect your html isn't exactly as you've presented it here. Look for things like missing quotes or mismatched quotes/tags etc. – Kevin B Dec 07 '18 at 23:22
  • 1
    To those that are posting answers assuming it is a timing issue. The function is being called from an inline binding. At the point that the user could make that happen, the DOM is rendered. It's not a timing issue. – Taplar Dec 07 '18 at 23:25
  • @Vatsal – nijomemo Dec 07 '18 at 23:25
  • @j08691 that looks promising... though... it doesn't seem to match the error occuring unless i'm misunderstanding – Kevin B Dec 07 '18 at 23:30
  • 1
    The EDIT doesn't make sense. If you can't get the method to execute through the input, how were you getting the error **in** the method to happen in the first place? – Taplar Dec 07 '18 at 23:34
  • Here is a working [JSFiddle](https://jsfiddle.net/pcqdo319/) – Mirakurun Dec 07 '18 at 23:49
  • @Mirakurun a working fiddle should be included in an answer, not a comment. – stealththeninja Dec 07 '18 at 23:49

2 Answers2

0

I have created a working JSFiddle. It seems to be the problem with the naming of your function as j08691 mentioned.

Also, you will probably have to change your function to arrow function, since it didn't work for me without it being an arrow function as the function was undefined.

Working version:

<div id="cookiebox">
    <input onclick="myFunction()" type="image" src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" height=100 width=100 class="cookie" />
</div>
<div id="cookieNumber"></div>

var cookies = 0;
myFunction = () => {
     cookies = cookies + 1;
     console.log(cookies);
     var test = document.getElementById("cookieNumber").innerHTML = cookies;
}
Mirakurun
  • 4,859
  • 5
  • 16
  • 32
-4

Try wrapping your JS code inside onload = function() { //your code here... }, and see if it works.

This makes sure that your div has actually loaded before calling getElementById on it

Anis R.
  • 6,656
  • 2
  • 15
  • 37