multiple document.getElementById text not working for pictures in iframe-CodePudding

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> &nbsp;
</td>

CodePudding user response：

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;
    }
}

CodePudding user response：

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" />

CodePudding user response：

    <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>
    &nbsp;</td>
    </body>
    </html>

CodePudding user response：

Add a "default.png" if someone write something else in the DICTIONARY.

<!-- HTML -->
<input type="button" value="GO" onclick="answer();" style="font-family:  Verdana; font-size: 15pt; font-weight: bold" />

// JavaScript
function answer() {
        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;
           default: iframe.location.href = "default.png";
        }
    }