Reputation: 255
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
Reputation: 3950
Oke here, it works: http://jsfiddle.net/PCN65/
What I did is
id="close()"
to onclick="closeOverlay()"
.;
from behind your function, they should not be there.window.onload = function(){
function closeOverlay(){
//code
}
};
This makes the closeOverlay-function anonymous.
Upvotes: 0
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
Reputation: 12190
It seems close is a reserved keyword.
Try -
function closeMe(){
document.getElementById('overlay').style.display = "none";
}
A few typos are causing the issue:
you are calling the close function on ID in your HTML
overlay is already hidden and you are again trying to hide it.
Check this Updated Fiddle and arrange your HTML accordingly
Upvotes: 1
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.
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
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
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