PDA

View Full Version : HTML newb seeks help



claybaby
Jul 29th, 2012, 04:28 AM
I'm having trouble putting javascript into html. My goal is to have a select list on the webpage that when each item is selected displays a different image. I am thinking about it in two steps.

Step One: write html and javascript that when select form is changed causes something to happen. In this case I'm just trying to get text to appear on the webpage.

Step Two: javascript changes image where the text appeared in step one.

Following is my code for step one. The select list is there, but nothing appears where the <div id> lives. Any suggestions? Am I missing something crucial?


<html>

<head>

<script type= "text/javascript">

var whichMood = function() {
var mood = document.moodForm.mood.value;

documemt.getElementById("picHere").innerHTML = "mood";
};

</script>

</head>

<body>

<form name="moodForm">

<select name="mood" onchange="whichMood()">
<option value="cute" selected>cute</option>
<option value="scary" >scary</option>
<option value="goofy" >goofy</option>
</select>
</form>

<div id="picHere"></div>

</body>

</html>

yeah.

DrDOS
Jul 29th, 2012, 05:06 AM
This line here has two errors.


documemt.getElementById("picHere").innerHTML = "mood";
The word document is misspelled, and the word mood is a variable so it shouldn't be in quotes.

Philip M
Jul 29th, 2012, 09:37 AM
And you need to display the src of the image. If you are using onchange then you must have a default image as otherwise nothing will happen unless/until the select list option changes.


<html>
<head>

<script type= "text/javascript">

var whichMood = function() {
var mood = document.moodForm.mood.value + ".jpg"; // the image to be shown
document.getElementById("mypic").src = mood;
}

</script>

</head>

<body>

<form name="moodForm">

<select name="mood" onchange="whichMood()">
<option value="cute" selected>cute</option>
<option value="scary" >scary</option>
<option value="goofy" >goofy</option>
</select>
</form>

<img id = "mypic" src = "cute.jpg">

</body>
</html>

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


It's good to hear the union jack being played at all the European Championships. - Commentator BBC Radio 2

claybaby
Jul 29th, 2012, 02:10 PM
i realized the title was stupid after posting, but I'm not sure how to edit the title. i'll keep it more useful in future. thanks