Why doesn't this onclick handler on an img work?

Question

I use a <img>, set onclick() method, but it cannot call the method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="close();"> 
</div>
<script  type="text/javascript">
    function close(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

Why when I click the <img>, it can not execute the close() cody? I really don't know how to resolve the issue.

Since `window.close()` is already defined by the browser (for closing the current window), you better change `close()` to `somethingElse()` — haim770, Sep 05 '16 at 08:38

score 3 · Answer 1 · edited May 23 '17 at 10:29

As haim770 pointed out in a comment (edit; and now an answer), the problem is the name of the function. The global namespace is really crowded, and there's already a close function in it that you can't override. Use a different name.

This is one of the many reasons not to use onxyz attribute-style event handlers: They require that your functions be globals. Instead, use modern event handling that doesn't require that you use globals:

document.getElementById("img-id").addEventListener("click", function() {
    // ...your code here...
}, false);

Make sure the code above runs after the img element exists. (If you have to support obsolete browsers like IE8 — or IE9-11 when they hobble themselves with [in]compatibility mode — see this answer.)

Example:

document.getElementById("img-id").addEventListener("click", function() {
  // ...your code here...
  alert("Clicked");
}, false);

<div style="width: 300px; height: 200px;" id="img-div">
  <img id="img-id" src="https://www.gravatar.com/avatar/4f8efc215ecc23017b42334c9b30c49b?s=32&d=identicon&r=PG&f=1"  style="CURSOR:pointer;">
</div>

score 1 · Accepted Answer · answered Sep 05 '16 at 08:42

When you define a function named close on the global context (window, in case of the browser), you're actually defining it as window.close. But, since window.close is reserved for the purpose of closing the current window, they collide.

Change the name to something less generic:

function closeIt() {
    // ...
};

score 0 · Answer 3 · answered Sep 05 '16 at 08:39

The problem is in the name "close()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onclick="closing();"> 
</div>
<script  type="text/javascript">
    function closing(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

score 0 · Answer 4 · answered Sep 05 '16 at 08:41

You have used close() function which is same as JavaScript's native close() function, so use another name as below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
    <img id="img-id"  src="resources/01.jpg" width="200px" height="80px"  style="CURSOR:pointer;" onClick="close_function();"/> 
</div>
<script  type="text/javascript">
    function close_function(){

        console.log('js');

        alert(111);
    }

</script>
</body>
<html>

Why doesn't this onclick handler on an img work?

4 Answers4