Why is img.onclick not functioning?

Question

I have this code but the img.onclick isn't functioning and couldn't figure out what's the reason. Could someone give me some advice? Thanks

var img = document.createElement('img');
img.src = "images/tv.jpg";
img.width = "280";
img.height = "200";
img.onclick = function () {
    window.location.href = "~/HEMS/EditDevice.cshtml";
}

...............

cell.appendChild(img);`

The `href` you're trying to set gives the impression of a local file (presumably on Linux/Unix?), try using an absolute path with the `file:///` protocol (using triple-slash notation if you choose to omit the `localhost` host-name from the URL) — David Thomas, Jan 07 '14 at 08:03
Given the file extension I suspect it's a .NET relative location — Liath, Jan 07 '14 at 08:11

score 1 · Accepted Answer · answered Jan 07 '14 at 08:05

Here is working demo

It is working perfectly, You need to make sure that url is correct for changing page location:

var img = document.createElement('img');
img.src = "images/tv.jpg";
img.width = "280";
img.alt='Url not exist';
img.height = "200";
img.onclick = function () {
    alert('1');
}

document.getElementById("cell").appendChild(img);

Liath · Answer 2 · 2014-01-07T08:12:13.633

0

Try

var img = document.createElement('img');
    img.src = "images/tv.jpg";
    img.width = "280";
    img.height = "200";
    img.onClick = function () {
        window.location.href = "~/HEMS/EditDevice.cshtml";
    }

    ...............

    cell.appendChild(img);

I believe it's onClick not onclick.

In addition the url you're redirecting to appears to be an MVC page using tilda notation, as this is a server side concept this is not going to work in JavaScript.

edited Jan 07 '14 at 08:12

answered Jan 07 '14 at 07:50

Liath

9,913
9
51
81

I was referring to the casing - js is case sensitive – Liath Jan 07 '14 at 07:54
Worth a shot - I assume the image is displaying ok? – Liath Jan 07 '14 at 07:55
yup, all the images are displaying on the page, but couldn't click on it – user3156931 Jan 07 '14 at 07:56
Can you put an alert box in there to confirm - I wouldn't expect tilda notation to work client side and MVC could be hiding errors. – Liath Jan 07 '14 at 07:58
Replace the window.location.href... with alert('test'); this will help to prove whether it's the click which isn't working or the redirect. – Liath Jan 07 '14 at 08:01
but the problem I'm facing now is that I couldn't click on the image – user3156931 Jan 07 '14 at 08:01
it's the click event function which is not working, the mouse cursor doesn't change when it's over the image, I believe the mouse cursor will change when it's on the image, right? – user3156931 Jan 07 '14 at 08:02
As you've wired the click dynamically that may well be a css issue http://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item – Liath Jan 07 '14 at 08:03
nah, that's not the problem. I believe it's the "img.onclick" not functioning, the problem I'm having is that I couldn't click on the images created using img object – user3156931 Jan 07 '14 at 08:06
Refer to @ZaheerAhmed 's answer - he's confirmed my suspicions about the tilda – Liath Jan 07 '14 at 08:07

score 0 · Answer 3 · answered Jan 07 '14 at 08:12

try this one:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>

<div id="content">
    content
</div>


<script type="application/javascript">
var img = document.createElement('img');
    img.src = "grid.png";
    img.width = "280";
    img.height = "200";
    img.onclick = function () {
        window.location.href = "~/HEMS/EditDevice.cshtml";
    }    
var cnt = document.getElementById('content');
    cnt.appendChild(img);
</script>

</body>
</html>

Why is img.onclick not functioning?

3 Answers3