Configuré un selector de idioma para traducir dos números de idioma, pero no funciona, alguien puede verificar mi código. Uso el código if y else, pero el código parece tener algún error. Intenté arreglarlo, pero sigue sin funcionar. ingrese la descripción de la imagen aquí
<html> <head> <style> body, input{ font-size:20; } body{ text-align: center; } </style> <script> function translate() { var digNum = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; var freNum = ["une","deux","Trois","quatre","cinq","six","Sept","huit","neuve","Dix"]; var gemNum = ["ein","zwei","drei","vier","fünf","sechs","Sieben","acht","neun","zehn"]; if ("languageSelector"="French"){ document.getElementById("output").textContent = freNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } else if("languageSelector"="German"){ document.getElementById("output").textContent = gemNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } return translate; } </script> </head> <body> <h1>Amazing Translator</h1> <form> <input type="number" id="num_input" size="30" placeholder="Enter a number here" /> </form> <br > <select id="languageSelector"> <option>French</option> <option>German</option> </select> <br /> <br > <button onclick="window translate()">Translate</button> <br /> <h2>This translate is</h2><p id="output">translate</p> </body> </html>En su imagen, languageSelected se identifica como una variable (ya que no está entre comillas), pero no puede encontrar una declaración para él en ninguna parte, por lo que se genera el error. En la publicación, está comparando dos cadenas, que no coinciden, por lo que ninguna de las declaraciones if... se ejecuta. Además, asegúrese de usar == o === para comparaciones y use = para asignar un valor.
Para corregir: para las etiquetas dentro de la sección, puede agregar un atributo de valor a cada una. <option value="x">text</option> . Luego, simplemente puede obtener el valor seleccionado seleccionando el .value de la etiqueta, por ejemplo: document.getElementById('languageSelector').value;
Y como dice el comentario, es mejor usar agregar un detector de eventos ya que he tenido problemas con el onclick como 'translate() no está definido'.
Use el element.addEventListener("action", function) para el botón. El primer argumento toma una acción, con 'click' en este caso, y el segundo es una función de devolución de llamada, que podemos pasar en la función de translate en este caso.
Aquí hay un fragmento de código para demostrar.
<html> <head> <style> body, input { font-size: 20; } body { text-align: center; } </style> </head> <body> <h1>Amazing Translator</h1> <form> <input type="number" id="num_input" size="30" placeholder="Enter a number here" /> </form> <br> <select id="languageSelector"> <option value="French">French</option> <option value="German">German</option> </select> <br /> <br> <button id="translate">Translate</button> <br /> <h2>This translate is</h2> <p id="output">translate</p> <script> function translate() { var digNum = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; var freNum = ["une", "deux", "Trois", "quatre", "cinq", "six", "Sept", "huit", "neuve", "Dix"]; var gemNum = ["ein", "zwei", "drei", "vier", "fünf", "sechs", "Sieben", "acht", "neun", "zehn"]; //declare a variable here that gets the values const selectedLang = document.getElementById('languageSelector').value; if (selectedLang === "French") { document.getElementById("output").textContent = freNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } else if (selectedLang === "German") { document.getElementById("output").textContent = gemNum[digNum.indexOf(document.getElementById("num_input").value)] || 'translate'; } } //add an onClick event to the button, I used querySelector because it offers more flexibility, you can use any valid CSS selectors inside document.querySelector('button#translate').addEventListener("click", translate) </script> </body> </html>