I want to hide the image when clicked. Calling function when element.onclick not working

Question

var image = document.getElementById("image");

function hide(el){
  el.hidden = true;
}

image.onclick = hide(image);

I've gone over this part countless times, but I'm not smart enough to see why it isn't working. Thanks for the help lads.

THE HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image></div>
  <script src="script.js"></script>
  </body>
</html>

Can you show the HTML tag for the image? Does it have an id of "image" Any errors? — Bas Slagter, Jul 16 '19 at 08:33

Mamun · Answer 1 · 2019-07-16T10:27:49.507

3

Your function is called and executed on page load. Call the function inside of an anonymous function.

Please Note: You do not have any element with id=image.

var image = document.getElementById("image");

function hide(el){
  el.hidden = true;
}

image.onclick = function(){ hide(image) };

<div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>

Probably the following demo will help you to clear your doubts:

var image = document.getElementById("image");
function hide(){
  image.hidden = true;
}

image.onclick = hide; // notice there is no () after the function name, here the function will not be executed on page load

<div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>

edited Jul 16 '19 at 10:27

answered Jul 16 '19 at 08:33

Mamun

66,969
9
47
59

Why is my function called on page load when it isn't an IIFE? And when the image hasn't been clicked yet? wtf – Jul 16 '19 at 08:37
@lukact, when calling a function, `()` after the function invokes the function immediately... – Mamun Jul 16 '19 at 08:38
I wonder why this works since there are no images with an id of "image" – Bas Slagter Jul 16 '19 at 08:47
@BasSlagter, in my answer, of course img has an *id*:) – Mamun Jul 16 '19 at 08:49
I get that...but not in the OP ;) – Bas Slagter Jul 16 '19 at 08:56
Don't get caught up in the lack of the "image"-id since it wouldn't have worked even if it was there. – Jul 16 '19 at 09:08
@lukact, that is just another issue. You did post HTML and JavaScript code, you should have connection between them:) – Mamun Jul 16 '19 at 09:13
I just dont get why the function is called immidiately and not when image.onclick. – Jul 16 '19 at 09:16
@Mamun, that's not the problem either – Jul 16 '19 at 09:28

score 0 · Answer 2 · answered Jul 16 '19 at 08:36

0

document.getElementById("image").addEventListener('click', function() {
  this.hidden = true;
}

answered Jul 16 '19 at 08:36

Ricardo Carvalho

393
1
3
17

Would you recommend EventListeners over onclick. Why? – Jul 16 '19 at 08:37
https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – Ricardo Carvalho Jul 16 '19 at 08:39

score 0 · Answer 3 · answered Jul 16 '19 at 08:40

0

As i look at your HTML, there is no image with the id of "image" So no element will be returned on the document.getElementById("image") call.

You might want to use getElementsByTagName("image") instead but note that this is an array of elements.

answered Jul 16 '19 at 08:40

Bas Slagter

9,831
7
47
78

I want to hide the image when clicked. Calling function when element.onclick not working

3 Answers3