多个 document.getElementById 文本不适用于 iframe 中的图片

Question

我想制作一个非常简单的在线图片词典脚本，其中 child 可以在一个文本框中输入一个词（从一列十个词中选择），然后会弹出一张图片在 iframe 中。例如，输入“狗”，iframe 中会弹出一张狗图片。在同一个文本框中输入“猫”，同一个iframe中弹出一张猫图片。对于我拥有的代码，我包含了三个词和三张图片，狗、猫和鸟。但只有第三个词“鸟”起作用，鸟图片弹出。前两个词 dog 和 cat 不起作用。我认为这是因为我们不能有多个 document.getElementbyId，对吗？如果是这样，是否有其他解决方法或替代方法？如果可能的话，一个简单、最短的脚本，我可以很容易地添加文字。我希望所有图片都在同一个 iframe 框中弹出。

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>

Answer 1

你真的只需要一个功能。让它先加载“空白”图像，然后获取文本字段的值。然后您可以检查不同的好值，如果匹配，您可以将该图像加载到空白图像上。

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

Answer 2

这里你只需要一个功能

这是一个推荐的方法来做你想做的事

我用的是表格，因为这样你可以在输入单词时按回车键

我将 CSS 移动到样式表并使用 eventListeners 而不是 onclick

当您拥有可以使用的非常好的 img 标签时，也无需使用 iFrame

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

Answer 3

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

Answer 4

如果有人在字典中写了其他内容，请添加“default.png”。

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

多个 document.getElementById 文本不适用于 iframe 中的图片

multiple document.getElementById text not working for pictures in iframe

javascript

html

image

dictionary

iframe