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";
}

当然也改变了电话，它会起作用。

Live test case

更好的做法是仅使用JavaScript来定义点击事件：

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

在HTML本身内部不要搞乱JS。 Updated fiddle

Answer 2

似乎close是保留关键字。

尝试 -

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

Fiddle

一些拼写错误导致了这个问题：

您正在调用HTML中的ID的关闭功能
叠加已隐藏，您又在尝试隐藏它。

选中此Updated Fiddle并相应地安排您的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会工作。

在您的情况下，您尝试分配一个在功能准备就绪时不存在的javascript函数。

尝试将javascript放入html头

Answer 5

在这里，它有效： http://jsfiddle.net/PCN65/

我做的是

我将id="close()"更改为onclick="closeOverlay()"。
我从你的功能后面移除了;，他们不应该在那里。
我将jsFiddle中的“onLoad”改为“No Wrap - in head”。你在jsFiddle中加载onLoad会发生什么：

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

这使得closeOverlay函数成为匿名函数。

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"

img onClick不起作用

6 个答案: