Prev: FAQ Topic - Why does K = parseInt('09') set K to 0? (2010-05-29)
Next: Can't show flash player again on IE
From: bruce on 28 May 2010 23:58
Why doesn't this work? When I execute the "onClick" event, the image
appears briefly, then goes away.

I'm trying to develop a page where I can change the image being
displayed.

<script type='text/javascript'>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

</script>
<form name="form1" id="form1" method="post" action="">
<img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
<br ? />
<input name="Submit" type="submit" onclick="getImage()"
value="Submit" />
</form>

Thanks for the help
From: johncoltrane on 29 May 2010 02:42
Le 29/05/10 05:58, bruce a �crit :
> Why doesn't this work? When I execute the "onClick" event, the image
> appears briefly, then goes away.
>
> I'm trying to develop a page where I can change the image being
> displayed.
>
> <script type='text/javascript'>
>
> function getImage() {
> var image = "images/MtRushmore.JPG" ;
> document.getElementById('imgSpot').src=image;
> }
>
> </script>
> <form name="form1" id="form1" method="post" action="">
> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
> <br ? />
> <input name="Submit" type="submit" onclick="getImage()"
> value="Submit" />
> </form>
>
> Thanks for the help

You need to prevent the default behavior of your form's Submit button:

<form name="form1" id="form1" method="post" action="">
<img id="imgSpot" name="imgSpot" src="" height="200" width="200">
<br>
<input name="Submit"
type="submit"
onclick="getImage();return false;" // here
value="Submit">
</form>

Also you may try to be more coherent with your quotes. Mixing simple
quotes '' and double quotes "" is not that dangerous AFAIK but it's
considered messy by a lot of people.

There is a curious interrogation point in your BR.

--
(�l�)
From: Garrett Smith on 29 May 2010 03:17
On 5/28/2010 8:58 PM, bruce wrote:
> Why doesn't this work? When I execute the "onClick" event, the image
> appears briefly, then goes away.
>

Giving the form an empty action causes the current location to be used,
provided you have no BASE element in your document. When the form is
submitted to the same page, it appears that the page has reloaded.

Instead of submitting a form to swap the image, you may instead want to
use a link.

<a onclick="getImage(this.href)" href="images/MtRushmore.JPG">Get Image</a>

function getImage() {
var image = "images/MtRushmore.JPG" ;
document.getElementById('imgSpot').src=image;
}

[...]

> </script>
> <form name="form1" id="form1" method="post" action="">
> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>
> <br ? />

Interesting. I've not seen that one before.

Spaces come across better than tabs; tabs don't have a set width. They
may even be displayed as zero width, making the code harder to understand.

Garrett
From: Garrett Smith on 29 May 2010 03:21
On 5/29/2010 12:17 AM, Garrett Smith wrote:
> On 5/28/2010 8:58 PM, bruce wrote:
>> Why doesn't this work? When I execute the "onClick" event, the image
>> appears briefly, then goes away.
>>
>
> Giving the form an empty action causes the current location to be used,
> provided you have no BASE element in your document. When the form is
> submitted to the same page, it appears that the page has reloaded.
>
> Instead of submitting a form to swap the image, you may instead want to
> use a link.
>
> <a onclick="getImage(this.href)" href="images/MtRushmore.JPG">Get Image</a>
>

Make that <a onclick="getImage(this.href); return false;"

- return false will prevent the default action. That will work for the
submit button as well.

Garrett
From: SAM on 29 May 2010 05:19
Le 5/29/10 5:58 AM, bruce a �crit :
> Why doesn't this work? When I execute the "onClick" event, the image
> appears briefly, then goes away.

because you don't avoid the submitting and the form's action fires
(here that will refresh same displayed page)

<input type="submit" onclick="return false">
or, much better :
<form onsubmit="return false">

> I'm trying to develop a page where I can change the image being
> displayed.
>
> <script type='text/javascript'>
>
> function getImage() {
> var image = "images/MtRushmore.JPG" ;
> document.getElementById('imgSpot').src=image;
> }
>
> </script>
> <form name="form1" id="form1" method="post" action="">
> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/>

tags auto-closing only if Xhtml (the '/' in end of tag)
size is optional
attribute 'alt' omitted
'name' for 'img' can be admitted
(depends of the doctype, not allowed in Xhtml not "transitional")

> <br ? />

no '?'

> <input name="Submit" type="submit" onclick="getImage()"
> value="Submit" />

'name' has not to be set if you don't need to use that element in JS or
server-side.
'value' may be omitted
preferable to use the form's JS method/function 'onsubmit'

> </form>
>
> Thanks for the help

Examples :

1) (html) :
===========

<script type='text/javascript'>

function getImage(imageContainer) {
var image = "images/MtRushmore.JPG" ;
imageContainer['imgSpot'].src = image;
imageContainer.style.display = 'none';
return false;
}

</script>
<form action="" onsubmit="return getImage(this)">
<div>
<img name='imgSpot' src="" alt="the image" title="">
<br />
<input type="submit" value="Show image">
</div>
</form>



2) (xhtml) : (expecting that script is in the head)
============

<script type='text/javascript'>

function getImage(theLink) {
var image = theLink.href;
document.getElementById('imgSpot').src = image;
theLink.style.display = 'none';
return false;
}

</script>

<p>
<a href="images/MtRushmore.JPG" onclick="return getImage(this)">
show image
</a><br />
<img id="imgSpot" src="#" alt="the image" title="" />
</p>


3) (html) :
===========

<script type='text/javascript'>

function getImage(theLink) {
var image = theLink.href;
document.images['imgSpot'].src = image;
theLink.style.display = 'none';
return false;
}

</script>

<p>
<a href="images/MtRushmore.JPG" onclick="return getImage(this)">
show image
</a><br />
<img name="imgSpot" src="#" alt="the image" title="">

.... closing tag for 'p' is optional (except in Xhtml)


info (alt and title in img tag) :
=================================
The alt attribute must be set (even if it is empty)
The empty attribute 'title' avoid the bull-info with the 'alt' content
(even with IE),
that title may get another content than the alt,
the bull-info will show the title content then (even with IE).
The alt attribute is to show a text of replacement if the image's file
doesn't exists, or at a wrong address (IE is wrong showing that in a
bull-info)
--
sm
 |  Next  |  Last
Pages: 1 2 3
Prev: FAQ Topic - Why does K = parseInt('09') set K to 0? (2010-05-29)
Next: Can't show flash player again on IE