I’d like to make a very simple online picture dictionary script where a child can type in a word (from a list of say ten words), and a picture pops up in an iframe. Example, type in “dog” and a dog picture pops up in the iframe. Type in “cat” and a cat picture pops up in the same iframe. For the code that I have, I’ve included three words and three pictures, dog, cat and bird. But only the third word, “bird”, works, the bird picture pops up. The first two words, dog, and cat are not working. I think it’s because we can’t have multiple document.getElementbyId, am I correct? If so, is there another workaround or alternative for this? A simple, shortest script if possible, that will be easy for me to add words to. I would like all the pictures to pop up in the same iframe box. Thanks in advance.
Here’s the code:
<head>
<script>
function answer1()
{
if(document.getElementById("DICTIONARY").value=="dog")
iframe.location.href="dog.png"
else
iframe.location.href="blank.png";
}
function answer2()
{
if(document.getElementById("DICTIONARY").value=="cat")
iframe.location.href="cat.png"
else
iframe.location.href="blank.png";
}
function answer3()
{
if(document.getElementById("DICTIONARY").value=="bird")
iframe.location.href="bird.png"
else
iframe.location.href="blank.png";
}
</script>
</head>
<input id="DICTIONARY" type="text" size="8" style="font-family: Verdana; font-size: 20pt"/>
<input type="button" value="GO" onclick="answer1();answer2();answer3();" style="font-family: Verdana; font-size: 15pt; font-weight: bold"/>
<br>
<br>
<iframe name="iframe" width="400" height="250"></iframe>
</td>
</body>
</html>