img onClick不起作用

Question

我对此<img onClick="close()" src="img/close.png"> ，这是关闭功能

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

我不知道为什么，但是当我单击该图像时，什么都没有发生，当我在控制台中尝试close（）时，它可以工作。 我什至尝试做<a href="#" onClick="close()"><img src="img/close.png"></a>但是什么也没发生。 有人知道哪里出问题了吗？ 我不知道问题可能在哪里。

我尝试将其添加到JSfiddle上，但效果不佳http://jsfiddle.net/hHe2w/5/

Answer 1

close()是全局window对象的本机方法，因此在HTML本身中使用内联代码时，它将在某些浏览器中优先。

将函数名称更改为更有意义的名称，例如

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

当然也更改通话，它将起作用。

现场测试用例 。

更好的做法是仅使用JavaScript定义click事件：

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

不要在HTML本身内部弄乱JS。 更新小提琴 。

Answer 2

似乎close是保留关键字。

尝试-

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

小提琴

一些错字导致了此问题：

1. 您正在HTML中的ID上调用close函数

2. 叠加层已被隐藏，您再次尝试将其隐藏。

检查此更新的小提琴并相应地排列您的HTML

Answer 3

尝试这个：

HTML：

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

的JavaScript

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

确保您编写close()而不是close(n) 。

Answer 4

当onLoad更改为head时，您的jsfiddle工作。

在您的情况下，您尝试分配了onDom上不存在的javascript函数。

尝试将javascript放在html头中

Answer 5

好吧，这里有效： http : //jsfiddle.net/PCN65/

我所做的是

1. 我将id="close()"更改为onclick="closeOverlay()" 。
2. 我删除了; 从您的职能背后，他们不应该在那里。
3. 我将jsFiddle中的“ onLoad”更改为“ No Wrap-in head”。 当您在jsFiddle中放置onLoad时，会发生以下情况：

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

这使closeOverlay-function匿名。

Answer 6

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和style.visibility不同

IE可见性属性| 能见度

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

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

IE显示属性| 显示

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"