Выбрав вариант раскрывающегося списка, измените h1 с помощью javascript
Я очень новичок в кодировании и не смог найти для этого решения с условием если.
Я знаю, как это сделать с помощью html-кода и параметров, но на этот раз мне нужно сделать это с помощью массивов и функции if.
В основном мне просто нужно раскрывающееся меню с языками (которое я сделал), а затем, когда я нажимаю на определенный язык (например, английский) - мне нужно изменить html h1 на «Привет!», когда я нажимаю латышский «Labdien» и т. д.
В основном мне нужно написать правильную функцию if, надеюсь, вы могли бы сказать мне, что там не так.
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>Все еще выясняя, что не так с оператором if, есть некоторая проблема:
if (arr[0] == "Latvian")
else if (arr[1] == "English")
else if (arr[2] == "Russian").
Или, может быть, мне нужно вызвать функцию, а затем разместить ее на выбор в HTML? Помогите.. весь день гуглил и ютубил
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добавить прослушиватель событий change к элементу select. Кроме того, вы можете использовать индекс каждого языка в качестве значения параметров выбора и использовать тот же массив при установке h1 внутреннего HTML:
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>Спасибо за это! Это работает, если мне нужно показать одно и то же значение (например, английский), когда я нажимаю «Английский». Но в этом случае я хочу выбрать «Английский», а затем мне нужно, чтобы текст отображался как «Привет!», По-латышски «Labdien!», По-русски «Добрый день!». Как это сделать с помощью функции if?
@KORENS Я только что обновил ответ. Обратите внимание, что я изменил переменную arr на массив языковых объектов.
Ваш вариант работает отлично, но мне особенно нужно получить тот же результат с оператором if ... не могу найти решение в Интернете весь день, хех
Вы можете сделать ту же проверку внутри функции changeHeading: if (language.language === 'English') // do something
@Korens, обратите внимание, как решение Михая не повторяет строковые литералы без необходимости. Я бы использовал карту/словарь, но это решение так же хорошо. Скажите своему инструктору, что то, как они заставляют вас делать это с помощью if, действительно плохо кодирует.
Просто к вашему сведению, чтобы быть суперпедантичным, обычно называют это «утверждением» if, потому что на самом деле это не «функция».