CODEWITHSUNDEEP
javascripthtml
user3719693
user3719693

Reputation: 255

img onClick doesnt work

I have got problem with this <img onClick="close()" src="img/close.png">, and this is close function 

function close(n){
    document.getElementById('overlay').style.display = "none";
}

I don't know why but when I click that image, nothing happens, when I try close() in console it works. I even tried to do <a href="#" onClick="close()"><img src="img/close.png"></a> but nothing happened. Anyone know where's the problem? I have no clue where the problem may be.

I tried to add it on JSfiddle but it works less http://jsfiddle.net/hHe2w/5/

Upvotes: 0

Views: 493

Answers (6)

myfunkyside
myfunkyside

Reputation: 3950

Oke here, it works: http://jsfiddle.net/PCN65/

What I did is

  1. I changed id="close()" to onclick="closeOverlay()".
  2. I removed the ; from behind your function, they should not be there.
  3. I changed the "onLoad" in jsFiddle to "No Wrap - in head". What happens when you put onLoad in jsFiddle is this:

window.onload = function(){ function closeOverlay(){ //code } };

This makes the closeOverlay-function anonymous.

Upvotes: 0

twseitex
twseitex

Reputation: 16

function close(){document.getElementById('overlay').style.display = "none";}
  // no param for event

function close(e) // e ist event, but you need a string for getelementById()
{document.getElementById('overlay').style.display = "none";}

<img onClick="javascript:document.getElementById('overlay').style.display="none";" src="img/close.png">
                  // better, no event handler function

style.display and style.visibility are not the same

IE visibility Attribute | visibility

syntax
    HTML        { visibility : sVisibility }  
    Scripting   object.style.visibility [ = sVisibility ] 

    sVisibility     String  "inherit" Default.
                "visible"
                "hidden"
    object can not loses place in document

IE display Attribute | display

syntax
    HTML        { display : sDisplay }  
    Scripting   object.style.display [ = sDisplay ] 

    sDisplay String     "block"
                "none"      object loses place in document
                "inline"
                "inline-block"
                "list-item"
                "table-header-group" 
                "table-footer-group"

Upvotes: 0

Dipak
Dipak

Reputation: 12190

It seems close is a reserved keyword.

Try - 

function closeMe(){
    document.getElementById('overlay').style.display = "none";
}

Fiddle

A few typos are causing the issue:

  1. you are calling the close function on ID in your HTML

  2. overlay is already hidden and you are again trying to hide it.

Check this Updated Fiddle and arrange your HTML accordingly

Upvotes: 1

Shadow Wizzard
Shadow Wizzard

Reputation: 66396

close() is native method of the global window object so when using inline code in the HTML itself, it will take precedence in some browsers.

Change the function name to something more meaningful, e.g.

function HideOverlay(){
    document.getElementById('overlay').style.display = "none";
}

And change the call too of course, and it will work.

Live test case.

Better practice would be using only JavaScript to define the click event:

window.onload = function() {
    document.getElementById("imgHideOverflow").onclick = function() {
        document.getElementById('overlay').style.display = "none";
    };
};

No messing around with JS inside the HTML itself. Updated fiddle.

Upvotes: 3

thenrion
thenrion

Reputation: 156

Your jsfiddle works when onLoad has been changed for head.

In your case, you tried to assign a javascript function which doesn't exist onDom ready.

Try to put javascript in html head

Upvotes: 0

Schokokuchen B&#228;cker
Schokokuchen B&#228;cker

Reputation: 916

Try this:

HTML:

<someElement id="overlay">...</someElement>
<img onClick="close()" src="img/close.png">

JavaScript

function close(){
    document.getElementById('overlay').style.display = "none";
}

Make sure you write close() and not close(n).

Upvotes: 0

Related Questions