CODEWITHSUNDEEP
javascripthtml
aircraft
aircraft

Reputation: 26876

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

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.

Upvotes: 1

Views: 184

Answers (4)

haim770
haim770

Reputation: 49095

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() {
    // ...
};

Upvotes: 1

Shailesh Chauhan
Shailesh Chauhan

Reputation: 570

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>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1073968

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>

Upvotes: 3

Yanbo
Yanbo

Reputation: 11

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>

Upvotes: 0

Related Questions