多個document.getElementById文本不適用于iframe中的圖片-有解無憂

我想做一個非常簡單的在線圖片詞典腳本，孩子可以在一個文本框中輸入一個單詞（從十個單詞的串列中），然后在 iframe 中彈出一張圖片。例如，輸入“dog”，iframe 中會彈出一張狗圖片。在同一個文本框中輸入“cat”，同一個iframe中就會彈出一張貓的圖片。對于我的代碼，我包含了三個單詞和三張圖片，狗、貓和鳥。但只有第三個詞“鳥”有效，鳥的圖片彈出。前兩個詞 dog 和 cat 不起作用。我認為這是因為我們不能有多個 document.getElementbyId，對嗎？如果是這樣，是否有另一種解決方法或替代方法？如果可能的話，一個簡單、最短的腳本，這對我來說很容易添加單詞。

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>

uj5u.com熱心網友回復：

你真的只需要一個功能。讓它先加載“空白”影像，然后獲取文本欄位的值。然后您可以檢查不同的良好值，如果匹配，您可以將該影像加載到空白影像上。

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

uj5u.com熱心網友回復：

您只需要一個功能

這是做你想做的事情的推薦方法

我使用表格，因為這樣您可以在鍵入單詞時按 Enter

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

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

如果有人在 DICTIONARY 中寫了其他內容，請添加“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";
        }
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434008.html

標籤：javascript html 图片字典框架

上一篇：如何對cairo創建的影像和從檔案加載的影像進行逐像素比較

下一篇：Python-從URL下載影像