473,406 Members | 2,816 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

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 67441
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: Philipp Lenssen | last post by:
My friend has the following problem (background: we want to transform XML to XHTML via XSLT): "We copy XHTML fragments into an output by using the following template: <xsl:template match="*"...
5
by: MyndPhlyp | last post by:
I've been busting my head trying to figure this out for quite some time. With IE6 and NS7, no problems. I can simply code the HTML <img height="100%"> and be done with it. But NS4 and NS6 (and...
15
by: Gérard Talbot | last post by:
Hello all, I'd like to know and understand the difference between, say, <img src="/ImageFilename.png" width="123" height="456" alt=""> and <img src="/ImageFilename.png" style="width:...
3
by: Henry Johnson | last post by:
Okay - I'm spinning my wheels on this one... can someone help me figure out how to programmatically populate a table cell as follows (from C# code-behind)? I've tried using a Literal control in the...
10
by: News | last post by:
I am trying to be able to manipulate the width and height of an <img> but do not seem to be able. "Yes", I know the JavaScript will "not" manip anything, which is ok. I simply do not know how to...
4
by: SammyBar | last post by:
Hi all, I wonder is it possible to upload the content of an <imgfield to a server. The content of the <imgwas downloaded from a web site different from the one it should be uploaded. The image...
4
by: Jon Slaughter | last post by:
I have a captcha system going and for some reason when I use <?php $s = ""; for($i = 0; $i < 10; $i++) { $s = $s.rand(0,9); } $_SESSION = $s; $fn = '/Login/Register/Captcha.php'; echo '<img...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.