img onClick"" doesn't work?

Question

HTML

<img src="http://i.pr3cast.pw/02.09.10z.png" onClick="disappear()">

JS

function disappear() {
document.getElementsByTagName("img").style.display = "none"; 
}

https://jsfiddle.net/1y42d7zm/

Nothing happens to the image when I click :(

Console says: Uncaught TypeError: Cannot set property 'display' of undefined

Thanks

The `.getElementsByTagName()` function returns a **list** of elements, even when there's only one matching element on the page. — Pointy, Feb 10 '17 at 23:36
You can use that, but you have to then extract the actual target image from the list. Exactly how you do that depends on the HTML. — Pointy, Feb 10 '17 at 23:37

matt · Accepted Answer · 2017-02-10T23:46:44.813

1

(function(){
  window.disappear = function() {
     console.log("dissapear");
     document.getElementsByTagName("img")[0].style = "display: none;"; 
  };
 }());

You almost had it. As others have mentioned, document.getElementsByTagName returns an array; you have to specify the element you want [0].

I changed your disappear function to be tied to the window as I wasn't able to access it via my CodePen. The closure (function(){}()) makes it so that the code will run when the dom is ready.

CodePen

edited Feb 10 '17 at 23:46

answered Feb 10 '17 at 23:36

matt

1,680
1
13
16

1

No, your code won't work either, for exactly the same reason that the OP code won't. – Pointy Feb 10 '17 at 23:37
Please don't leave out semicolons. – Barmar Feb 10 '17 at 23:42
And don't use CodePen when you can do just as well with a Stack Snippet. – Barmar Feb 10 '17 at 23:42
You should explain what you changed and why, not just post code that challenges the reader to understand why. – Barmar Feb 10 '17 at 23:43
@Barmar Stack Snippet? :S Where do I use that? – matt Feb 10 '17 at 23:43
https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Barmar Feb 10 '17 at 23:44
`document.getElementsByTagName("img")[0].style = "display: none;"; ` This is what I needed, so I'll mark this as the right answer. Still, what does "[0]" do? Thanks – Precast Dragon Feb 10 '17 at 23:46
@blex I just checked several of my answers that have stack snippets, they work just fine. – Barmar Feb 10 '17 at 23:46
@blex Such as http://stackoverflow.com/questions/42148920/array-of-array-to-object-javascript/42149025#42149025 – Barmar Feb 10 '17 at 23:46
@Barmar Made the changes. I guess for next time I'll make sure to use a stack snippet, thanks for mentioning it :) – matt Feb 10 '17 at 23:47
@Barmar Ok, then the bug might be local to my area/country: http://imgur.com/a/JoGdO – blex Feb 10 '17 at 23:48
@PrecastDragon The [0] grabs the first element from the array that is returned by: `document.getElementsByTagName("img")`. :) – matt Feb 10 '17 at 23:48

score 1 · Answer 2 · answered Feb 10 '17 at 23:40

1

HTML:

<img id="to-disappear" src="http://i.pr3cast.pw/02.09.10z.png"         onClick="disappear()">

JS:

function disappear() {
    document.getElementById("to-disappear").style.display = "none";
}

answered Feb 10 '17 at 23:40

kosher

335
3
13

it has to use an ID? I was trying to avoid that, I don't want to have to tag every single img element if I want to animate all of them, I'm pretty sure there must be a different way, right? – Precast Dragon Feb 10 '17 at 23:42
@PrecastDragon The different way is in the other answer. – Barmar Feb 10 '17 at 23:42
You have to do the iteration over the set of matched elements yourself. – Pointy Feb 10 '17 at 23:50

img onClick"" doesn't work?

2 Answers2