Me gustaría hacer un guión de diccionario de imágenes en línea muy simple en el que un niño pueda escribir una palabra (de una lista de, digamos, diez palabras), en un cuadro de texto, y aparece una imagen en un iframe. Ejemplo, escriba "perro" y aparecerá una imagen de un perro en el iframe. Escriba "gato" en el mismo cuadro de texto y aparecerá una imagen de gato en el mismo iframe. Para el código que tengo, he incluido tres palabras y tres imágenes, perro, gato y pájaro. Pero solo la tercera palabra, "pájaro", funciona, aparece la imagen del pájaro. Las dos primeras palabras, perro y gato no funcionan. Creo que es porque no podemos tener múltiples document.getElementbyId, ¿estoy en lo correcto? Si es así, ¿hay otra solución o alternativa para esto? Un guión simple, lo más corto posible, al que me será fácil agregar palabras. Me gustaría que todas las imágenes aparecieran en el mismo cuadro 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> </td>Realmente solo necesitas una función. Haga que primero cargue la imagen "en blanco", luego obtenga el valor del campo de texto. Luego puede verificar los diferentes valores buenos y, si hay una coincidencia, puede cargar esa imagen sobre la imagen en blanco.
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; } }Solo quieres una función aquí
Aquí hay una forma recomendada de hacer lo que quieras.
Uso un formulario, porque luego puedes presionar enter cuando escribes la palabra
Moví el CSS a una hoja de estilo y usé eventListeners en lugar de onclick
Además, no es necesario usar un iFrame cuando tiene una etiqueta img perfectamente buena que puede usar
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>