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), in one text box, and a picture pops up in an iframe. Example, type in "dog" and a dog picture pops up in the iframe. Type in "cat" in the same text box, 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.
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";
}<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>You really need only one function. Have it load the "blank" image first, then get the value of the text field. You can then check the different good values, and if there's a match you can load that image over the blank image.
function answer() {
iframe.location.href = "blank.png";
let value = document.getElementById("DICTIONARY").value;
switch (value) {
case "dog": iframe.location.href = "dog.png"; break;
case "cat": iframe.location.href = "cat.png"; break;
case "bird": iframe.location.href = "bird.png"; break;
}
}
You only want one function here
Here is a recommended way to do what you want
I use a form, because then you can press enter when you type the word
I moved the CSS to a stylesheet and use eventListeners instead of onclick
Also no need to use an iFrame when you have a perfectly good img tag you can use
const addresses = {
'dog': 'dog.png',
'bird': 'bird.png',
'cat': 'cat.png'
};
window.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('dictionary');
const image = document.getElementById('image');
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // stop submit
const img = addresses[inputField.value]
image.src = img ? img : 'blank.png'; // if found change
})
})#dictionary {
font-family: Verdana;
font-size: 20pt
}
#goButton {
font-family: Verdana;
font-size: 15pt;
font-weight: bold
}<form id="myForm">
<input id="dictionary" type="text" size="8" />
<input type="submit" value="GO" />
</form>
<img src="blank.png" id="image" /> <head>
<script>
function answer1()
{
if(document.getElementById("DICTIONARY").value=="dog")
iframe.location.href="dog.png";
else if(document.getElementById("DICTIONARY").value=="cat")
iframe.location.href="cat.png";
else 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();" style="font-family: Verdana; font-size: 15pt; font-weight: bold"/>
<br>
<br>
<iframe name="iframe" width="400" height="250"></iframe>
</td>
</body>
</html>