Soy muy nuevo en la codificación y no pude encontrar una solución con la condición if para esto.
Sé cómo puedo hacerlo con código html y opciones, pero esta vez necesito hacerlo con matrices y función if.
Básicamente, solo necesito un menú desplegable con idiomas (que hice) y luego, cuando hago clic en un idioma específico (por ejemplo, inglés), necesito cambiar html h1 a "¡Hola!", Cuando hago clic en letón "Labdien", etc.
Básicamente, necesito escribir una función if adecuada, espero que puedas decirme qué está mal allí.
const select = document.getElementById("select"), arr = ["Latvian", "English", "Russian"]; for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); option.appendChild(txt); option.setAttribute("value", arr[i]); select.insertBefore(option, select.lastChild); } if (arr[0] = "Latvian") { document.getElementById("heading").innerHTML = "Labdien!"; } else if (arr[1] == "English") { document.getElementById("heading").innerHTML = "Hello!"; } else if (arr[2] == "Russian") { document.getElementById("heading").innerHTML = "Добрый день!"; } <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Dropdown</title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1 class="heading" id="heading"></h1> <select class="drop" id="select"></select> <script src="./main.js"></script> </body>Todavía averiguando qué está mal con la declaración if, hay algún problema en:
if(arr[0] == "Latvian") else if(arr[1] == "English") else if(arr[2] == "Russian").¿O tal vez necesito llamar a una función y luego colocarla en HTML? Ayuda... he estado buscando en Google y YouTube todo el día
Puede agregar un detector de eventos de change al elemento seleccionado. Además, puede usar el índice de cada idioma como el valor de las opciones de selección y usar la misma matriz cuando configure el HTML interno de h1 :
var select = document.getElementById("select"); var arr = [ { id: 1, language: 'Latvian', title: 'Labdien!' }, { id: 2, language: 'English', title: 'Hello!' }, { id: 3, language: 'Russian', title: 'Добрый день!' } ]; for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"); var txt = document.createTextNode(arr[i].language); option.appendChild(txt); option.setAttribute('value', arr[i].id); select.insertBefore(option, select.lastChild); } // add a change event listener to handle the language title select.addEventListener('change', changeHeading); // trigger a change event in order to display the selected language's title select.dispatchEvent(new Event('change')); function changeHeading(event) { var language = arr.find( (language) => language.id === parseInt(event.target.value) ); document.getElementById('heading').innerHTML = language.title; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Dropdown</title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1 class="heading" id="heading"></h1> <select class="drop" id="select"></select> <script src="./main.js"></script> </body> </html>