469,270 Members | 1,042 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

change the onclick value of an <IMG> tag from javascript

KS
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>

What i want the javascript to do is change the onclick value of the <IMG>
tag above, by calling the test function from the same webpage by onclick on
a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";

}

</script>

The problem is when i first click the button, and then the <IMG> tag on the
same webpage, the script has not change it. I dont get the alert but the
original onclick value from the IMG.

KS
Jul 23 '05 #1
8 67117
Rearrange it as follows:

<html>
<head>
<script>
function show_calendar(){
alert('show calendar');
}

function rewriteOnclick(){
alert('test');
}

function test(){
document.getElementById("date").onclick = rewriteOnclick;
}
</script>
</head>

<body>
<img id="date" onClick="show_calendar();"
src="a.gif" width=200 height=100 border=0>
<form><input type="button" onclick="test()"value="test"/></form>
</body>
</html>

The basic idea is that you should not reassign to the event a string but a
function name.
I may perhaps also add that if you use document.all you may consider using
document.getElementById too, but I also guess that you already do and that
yours was just an example snippet.

Anyway try the above, it should work.
let us know
ciao
Alberto
http://www.unitedscripters.com/


"KS" <ka*****@hotmail.com> ha scritto nel messaggio
news:41********@news.broadpark.no...
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>

What i want the javascript to do is change the onclick value of the <IMG>
tag above, by calling the test function from the same webpage by onclick on a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";

}

</script>

The problem is when i first click the button, and then the <IMG> tag on the same webpage, the script has not change it. I dont get the alert but the
original onclick value from the IMG.

KS

Jul 23 '05 #2
KS wrote:
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>
<img name="date" onclick="show_calendar();" ...>

or

<img id="dateId" name="dateName" onclick="show_calendar();" ...>
What i want the javascript to do is change the onclick value of the <IMG>
tag above, by calling the test function from the same webpage by onclick on
a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";
document.images['date'].onclick = function () { alert('kalenderdato'); }

or

var img;
if (document.getElementById) {
img = document.getElementById('dateId');
} else if (document.all) {
img = document.all['dateId'];
} else if (document.images) {
img = document.images['dateName'];
}
if (img) {
img.onclick = function () { alert('kalenderdato'); }
}
}

</script>

The problem is when i first click the button, and then the <IMG> tag on the
same webpage, the script has not change it. I dont get the alert but the
original onclick value from the IMG.


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #3
Also assigning anonymous functions as Grant Wagner suggests is quite fine.
There is more than a way to do it. Grant's way works as well, and is 100%
fine to the purpose.

The basic ideaboth share is: when assigning to events via script, be sure on
the "right side" of the assignement is a function - either function name or
function signature.

Once you get that, you have got the meaning of it all. Afterwards just pick
your choice accordingly to what you like best for your own personal
practice, both are valid options.

I don't prefer mine because it is mine LOL ;-)

ciao
Alberto
http://www.unitedscripters.com/
"Grant Wagner" <gw*****@agricoreunited.com> ha scritto nel messaggio
news:41***************@agricoreunited.com...
KS wrote:
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>


<img name="date" onclick="show_calendar();" ...>

or

<img id="dateId" name="dateName" onclick="show_calendar();" ...>
What i want the javascript to do is change the onclick value of the <IMG> tag above, by calling the test function from the same webpage by onclick on a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";


document.images['date'].onclick = function () { alert('kalenderdato'); }

or

var img;
if (document.getElementById) {
img = document.getElementById('dateId');
} else if (document.all) {
img = document.all['dateId'];
} else if (document.images) {
img = document.images['dateName'];
}
if (img) {
img.onclick = function () { alert('kalenderdato'); }
}
}

</script>

The problem is when i first click the button, and then the <IMG> tag on the same webpage, the script has not change it. I dont get the alert but the original onclick value from the IMG.


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #4
On Wed, 18 Aug 2004 14:35:53 GMT, Grant Wagner
<gw*****@agricoreunited.com> wrote:

[snip]
var img;
if (document.getElementById) {
img = document.getElementById('dateId');
} else if (document.all) {
img = document.all['dateId'];
} else if (document.images) {
img = document.images['dateName'];
}


The images collection works just as well with names as it does ids. Except
in NN4, of course.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #5
KS
Thanx the consept almost work the way I want. There is one problem.
I need to pass some value to the test function and when i do that like this.

function test(x,y){
document.all.date.onclick = "alert(x.value,y.value)";

}

I also have to call the test function by "test(x,y)" and not only "test".
What then happends is that the test function get displayed after hitting the
button and not only when hitting the img tag.
Any solution to this??
x and y can not be called directly in test function it. I wont go into
detail because I will demand a rather long explanation.

KS

"KS" <ka*****@hotmail.com> skrev i melding
news:41********@news.broadpark.no...
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>

What i want the javascript to do is change the onclick value of the <IMG>
tag above, by calling the test function from the same webpage by onclick on a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";

}

</script>

The problem is when i first click the button, and then the <IMG> tag on the same webpage, the script has not change it. I dont get the alert but the
original onclick value from the IMG.

KS

Jul 23 '05 #6
KS
Jusing x and y has global attributes, written outside any function, solved
the problem. Might not be the best way, since it would be better to narrow
the scope of the x and y attribute.
KS

"KS" <ka*****@hotmail.com> skrev i melding
news:41********@news.broadpark.no...
Thanx the consept almost work the way I want. There is one problem.
I need to pass some value to the test function and when i do that like this.
function test(x,y){
document.all.date.onclick = "alert(x.value,y.value)";

}

I also have to call the test function by "test(x,y)" and not only "test".
What then happends is that the test function get displayed after hitting the button and not only when hitting the img tag.
Any solution to this??
x and y can not be called directly in test function it. I wont go into
detail because I will demand a rather long explanation.

KS

"KS" <ka*****@hotmail.com> skrev i melding
news:41********@news.broadpark.no...
Just to show some code to show the consept.

<img id="date" onclick="javascript:show_calendar();"
src="/PlexSysWeb/images/show-calendar.gif" width=20 height=18 border=0>

What i want the javascript to do is change the onclick value of the <IMG> tag above, by calling the test function from the same webpage by onclick

on
a button.

<input type="button" onclick="test()"value="test"/>

<script language='JavaScript'>

function test(){

document.all.date.onclick = "alert('kalenderdato')";

}

</script>

The problem is when i first click the button, and then the <IMG> tag on

the
same webpage, the script has not change it. I dont get the alert but the original onclick value from the IMG.

KS


Jul 23 '05 #7
On Thu, 19 Aug 2004 09:46:00 +0200, KS <ka*****@hotmail.com> wrote:
Thanx the consept almost work the way I want. There is one problem.
I need to pass some value to the test function and when i do that like
this.

function test(x,y){
document.all.date.onclick = "alert(x.value,y.value)";

}


You can use this:

function test(x, y) {
document.images['date'].onclick = function() {
alert(x.value, y.value);
};
}

and x and y don't need to be global (to answer your problem in your other
post).

The function expression above forms what's called a closure. If you want
more details on what closures are and how they work, you can read about
them in the group's FAQ notes:

<URL:http://www.jibbering.com/faq/faq_notes/closures.html>

[snipped top-post]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #8
KS
Nice, that solved it and the global isuee :)
KS

"Michael Winter" <M.******@blueyonder.co.invalid> skrev i melding
news:opscy1d5fxx13kvk@atlantis...
On Thu, 19 Aug 2004 09:46:00 +0200, KS <ka*****@hotmail.com> wrote:
Thanx the consept almost work the way I want. There is one problem.
I need to pass some value to the test function and when i do that like
this.

function test(x,y){
document.all.date.onclick = "alert(x.value,y.value)";

}


You can use this:

function test(x, y) {
document.images['date'].onclick = function() {
alert(x.value, y.value);
};
}

and x and y don't need to be global (to answer your problem in your other
post).

The function expression above forms what's called a closure. If you want
more details on what closures are and how they work, you can read about
them in the group's FAQ notes:

<URL:http://www.jibbering.com/faq/faq_notes/closures.html>

[snipped top-post]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

15 posts views Thread by Philipp Lenssen | last post: by
5 posts views Thread by MyndPhlyp | last post: by
10 posts views Thread by News | last post: by
4 posts views Thread by Jon Slaughter | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.