Understanding the writing method of switch/case

[Richard]

I am slowly understanding how this all comes together and feel it is an
answer to my needs.
By using a form with an image as my input, I can assign a value to the
image.
That I can not do with an image alone.
What I need to know is, what do I need to use in replace of the alert(msg)
so that the larger image and description appear below the thumbnails as
desired?

switch(buttonName.value) {
case "101":
alert("huh?")
break

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="saySomething(this)" />
</form>

This was shown as an xhtml document.

At least this much of it works.

 

[Janwillem Borleffs]

At least this much of it works.

As would the following, but without the switch overhead:

// Define messages
var msg101 = 'Huh?';
var msg102 = 'Huh????';
// etc
....
....
<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="alert(window['msg' + this.value]);return false" />
</form>

And remember that you can also use the alt attribute for this purpose...


JW

 

[Richard]

As would the following, but without the switch overhead:

// Define messages
var msg101 = 'Huh?';
var msg102 = 'Huh????';
// etc
...
...
<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="alert(window['msg' + this.value]);return false" />
</form>

And remember that you can also use the alt attribute for this
purpose...

JW

Thanks, that could work even better.

 

[Richard]

As would the following, but without the switch overhead:

// Define messages
var msg101 = 'Huh?';
var msg102 = 'Huh????';
// etc
...
...
<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="alert(window['msg' + this.value]);return false" />
</form>

And remember that you can also use the alt attribute for this
purpose...

JW

Now what would I need to do to print the result to the same page?
My idea is to write a description above the larger image all on the same
page.

www.somestuff.batcave.net/menu1.html

 

[Randy Webb]

I am slowly understanding how this all comes together and feel it is an
answer to my needs.

Its not. You just think it is.

By using a form with an image as my input, I can assign a value to the
image.
That I can not do with an image alone.

Sure you can. You just don't know how to do it.

What I need to know is, what do I need to use in replace of the alert(msg)
so that the larger image and description appear below the thumbnails as
desired?

Code that will change the image source and the text of a div tag. Search
the archives and the FAQ and you will find what you are hunting.

switch(buttonName.value) {
case "101":
alert("huh?")
break

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="saySomething(this)" />
</form>

This was shown as an xhtml document.

At least this much of it works.

No, you just think it works.

function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}

And you call it as such:

changeImage('image1','image1BigImage.gif','textDiv','Text to place in
the div goes here')

All of that can be made even simpler using an array and passing its
index. But *NONE* of it requires a switch/case construction.

 

[Richard]

Ok. So why do I keep getting errors when onclick is executed?
One time it says "/" expected at character 47, another time at character 26.
Now it tells me thmb002.jpg is undefined at character 1.
This is why I do not understand JS. To many ways to get an error and no
explanations.


function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}

</script>

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="changeImage(main,images/thmb002.jpg,sample,'hello')">
</form>

<div id="sample" >

<img src="images/saturn.gif" name="main">

</div>

 

[Randy Webb]

Ok. So why do I keep getting errors when onclick is executed?

Because you did not quote it properly. Re-read my example onclick:

changeImage('image1','image1BigImage.gif','textDiv','Text to place in
the div goes here')

See the quotes around image1 that you do not have around your main?

One time it says "/" expected at character 47, another time at character 26.
Now it tells me thmb002.jpg is undefined at character 1.

Since it is not quoted, the JS parser assumes that to be a variable
name. Since that variable is not defined, you get the error.

This is why I do not understand JS. To many ways to get an error and no
explanations.

There is always an explanation for an error. You just don't understand
how to go about finding the errors/cause.

function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}

</script>

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="changeImage(main,images/thmb002.jpg,sample,'hello')">
onclick="changeImage('main','images/thmboo2.jpg','sample','hello')"

</form>

<div id="sample" >

<img src="images/saturn.gif" name="main">

</div>

<div id="sample"></div>
<img src="images/saturn.gif" name="main" height="XX" width="XX" alt="XXXXX">


P.S. Still no switch/case in the construct.

 

[Michael Winter]

Ok. So why do I keep getting errors when onclick is executed?

Because out of four (what should be) string literals, you've only quoted
one.

[snip]

This is why I do not understand JS.

It's tempting...

[snip]

Mike

 

[Richard Cornford]

Ok. So why do I keep getting errors when onclick is executed?

That is a silly question really. For as long as you believe you can
employ a technology without first learning that technology you will get
many errors and not understand why. The general tolerance of tag soup
browsers might allow you to get away with disregarding the technical
details of HTML but programming languages cannot be that lax.

One time it

What it "it"?

says "/" expected at character 47, another time at
character 26.

That is extremely unlikely to be all that "it" says.

Now it tells me thmb002.jpg is undefined at character 1.

The identifier - thmb001 - in the property accessor - thmb001.jpg - is
probably undefined.

This is why I do not understand JS.

No it isn't. You don't understand javascript because you have not
attempted to learn the language before attempting to use it. (Though it
may be that you are too stupid to understand computer programming
anyway. You certainly haven't grasped that it is inappropriate to
attempt to give advice to others until you have understood tat least the
basics).

To many ways to get an error and
no explanations.

You have been given an explanation by whatever "it" was. You have
apparently disregarded part of that explanation and not understood its
meaning, but the explanation was given.

function changeImage(imageName,imageSource,divName,divText){
document.images[imageName].src=imageSource;
document.getElementById(divName).innerHTML = divText;
}

</script>

<form action="#">
<input type="image" src="images/thmb001.jpg" value="101"
onclick="changeImage(main,images/thmb002.jpg,sample,'hello')">

<snip>

<input type="image"> elements do not appear in the - document.images -
collection; only IMG elements do (as is stressed in the W3C HTML DOM
specification). They are also almost certainly an inappropriate choice
of element to use for this task. For one thing, uncancelled, clicking on
such an element will submit the form that contains it.

Richard.