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

K

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
 
A

Alberto

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/
 
G

Grant Wagner

KS said:
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>
Click to expand...

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

or

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')";
Click to expand...

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'); }
}
 
A

Alberto

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 said:
KS said:
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>
Click to expand...

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

or

What i want the javascript to do is change the onclick value of the
Click to expand...
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')";
Click to expand...

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.
Click to expand...
Click to expand...
 
M

Michael Winter

On Wed, 18 Aug 2004 14:35:53 GMT, Grant Wagner

[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'];
}
Click to expand...

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

[snip]

Mike
 
K

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
 
K

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
 
M

Michael Winter

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)";

}
Click to expand...

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
 
K

KS

Nice, that solved it and the global isuee :)
KS

Michael Winter said:
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)";

}
Click to expand...

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
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Two events one onclick 1
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to change star rating color on mouseenter, on mouseout, and on onclick 0
How to stop an animated image from sticking to top of page? 2
Only one table shows up with the information 2
How do I hide the modal after 5 seconds? 4
Slideshow not working properly 2

Members online

Total: 28 (members: 2, guests: 26)
Robots: 334

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top