/    Sign up×
Community /Pin to ProfileBookmark

Can’t figure out how to make these (supposedly) small and simple programs

I’m brand new at making JavaScript programs. I’m taking my first class and am already far behind because our teacher is absolutely HORRIBLE and doesn’t teach us anything. I have about 6 programs I have to make and I’m about to give up.

The only one I have any code for is a program where we have to create a drop-down box and have it display one of 3 picture choices.

I’ve gotten as far as creating the drop-down box but I don’t know what to do to get it to display the pictures.

This is the code I have for this program:

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Language” content=”en-us” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Project6</title>

<style type=”text/css”>

.style1
{ text-align: left; }

.style2
{
text-align: center;
font-size: x-large;
}

</style>

<script language =”javascript”>

function showimage(){

if (!document.images)

document.image.pictures.src=
document.mygallery.options[document.mygallery.picture.selectedIndex].value
return

}
</script>
</head>

<body>

<p class=”style2″>This program will display different pictures.</p>
<div class=”style1″ style=”height: 22px; width: 833px”>

<select name=”picture” size=”1″ onchange=”showimage()”>
<option selected=”selected” value=”Picture1.jpg”>Picture 1</option>
<option value=”Picture2.jpg”>Picture 2</option>
<option value=”Picture3.jpg”>Picture 3</option>
</select> </div>

</body>

</html>
[/CODE]

Picture1, Picture2, and Picture 3 are the names of the pics.
What I don’t know is what functions or actions or whatever it is I need to do to get this box to display these pictures?

If anyone can help with this I’d be extremely grateful

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERNov 21.2009 — I spotted 2 errors, but since I don't have your pictures to check out results, you need to try this ...
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Language" content="en-us" /&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Project6&lt;/title&gt;

&lt;style type="text/css"&gt;
.style1 { text-align: left; }

.style2 {
text-align: center;
font-size: x-large;
}
&lt;/style&gt;

&lt;script language ="javascript"&gt;
// From: http://www.webdeveloper.com/forum/showthread.php?t=220284

function showimage(pics){
if (!document.getElementById) { return false; } // see if browser can handle picture changes
document.getElementById('picture').src = pics; // yep, it can, so substitute correct image
return true;
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

<i> </i>&lt;p class="style2"&gt;This program will display different pictures.&lt;/p&gt;
<i> </i>&lt;div class="style1" style="height: 22px; width: 833px"&gt;

<i> </i>&lt;select name="picture" size="1" onchange="showimage(this.value)"&gt;
<i> </i>&lt;option selected="selected" value="Picture1.jpg"&gt;Picture 1&lt;/option&gt;
<i> </i>&lt;option value="Picture2.jpg"&gt;Picture 2&lt;/option&gt;
<i> </i>&lt;option value="Picture3.jpg"&gt;Picture 3&lt;/option&gt;
<i> </i>&lt;/select&gt; &lt;/div&gt;

<i> </i>&lt;br&gt;
<i> </i>&lt;img id="picture" src="Picture1.jpg"&gt;
&lt;/body&gt;

&lt;/html&gt;


One error was that you had no element to store the images to, hence the <img> tag addition

Second was that you were checking that something could not be done and then went ahead and did it anyway, as in this line in your code:

if (!document.images)

I changed it to if (!document.getElementById), but the logic still applies.
Copy linkTweet thisAlerts:
@mvbf987authorNov 21.2009 — Ohh ok I see your changes. I'm going to have to really look at it to try and understand what did what but thank you for the help.

It's sad that I managed to get almost that whole page up and running yet I don't understand any of it. Although it wouldn't have worked without the help..anyway thanks again!
Copy linkTweet thisAlerts:
@JMRKERNov 21.2009 — You're most welcome.

Happy to help.

Good Luck!

?
×

Success!

Help @mvbf987 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...