Блог

Главная - Вопросы по программированию - Синтаксис Javascript getElementById outerHTML

Синтаксис Javascript getElementById outerHTML

#javascript #getelementbyid #outerhtml

#javascript #getelementbyid #outerhtml

Вопрос:

У меня есть вопрос, касающийся синтаксиса outerHTML. Также возможно, что я думаю в неправильном направлении.

Мой HTML-файл выглядит следующим образом:

 <!DOCTYPE html>
<html lang="en">
<body>
<label for="language">Choose a language:</label>
<select name="language" id="language" value="val1">
<option value="val1">English</option>
<option value="val2">German</option>
</select>
<p>You selected: <span id="language"></span></p> <!-- shall display either "English" or "German" -->
<p>You selected the following option: <span id="language"></span></p> <!-- shall display either "val1" or "val2" -->
<script  src="./script.js"></script>
</body>
</html>

Я имею в виду скрипт, в котором на данный момент единственным содержимым является

 var selectedlang = document.getElementById("language").outerHTML;

В html-файле должно отображаться значение и переменная для него. Я не знаю, как поступить.

Комментарии:

1. В документе не может быть более одного элемента с одинаковым id значением (приведенное выше имеет три). Если вы все равно это сделаете, это недопустимый документ, и теоретически браузер может делать все, что захочет (включая id полное игнорирование). На практике то, что они делают, это getElementById дают вам первый элемент в документе с этим id . Они не полностью игнорируют id последующие элементы, они просто отдают приоритет первому. Но не полагайтесь на это. Используйте другие способы идентификации элементов, если у вас их несколько.

2. Привет, да, это проблема синтаксиса в первую очередь. Как мне ссылаться на идентификатор, чтобы поместить переменную или значение между элементами span?

Ответ №1:

В документе не может быть более одного элемента с одинаковым id значением; ваша текущая разметка используется id="language" для трех разных элементов. Вам нужно будет изменить по крайней мере два из них.

Я думаю, вы спрашиваете, как:

  1. Показать текст и значение выбранного в данный момент параметра в двух span s, и
  2. Как обновить то, что вы показываете, если пользователь изменяет выбор.

Если вам просто нужно выбранное значение, вы можете использовать value свойство select элемента. Но как для текста, так и для значения вам понадобятся selectedIndex свойство и options коллекция:

 function showTextAndValue(select, textSpan, valueSpan) {
    const option = select.options[select.selectedIndex];
    if (option) {
        textSpan.textContent = option.text;
        valueSpan.textContent = option.value;
    } else {
        // No option is selected
        textSpan.textContent = "";
        valueSpan.textContent = "";
    }
}

В этом примере я заставил его принять select и span s в качестве параметров функции.

Вы бы вызывали эту функцию при загрузке страницы, а затем снова всякий select input раз, когда срабатывает событие.

Вот пример:

 const select = document.getElementById("language-select");
const textSpan = document.getElementById("text-span");
const valueSpan = document.getElementById("value-span");

function showTextAndValue(select, textSpan, valueSpan) {
    const option = select.options[select.selectedIndex];
    if (option) {
        textSpan.textContent = option.text;
        valueSpan.textContent = option.value;
    } else {
        // No option is selected
        textSpan.textContent = "";
        valueSpan.textContent = "";
    }
}

// Show on page load
showTextAndValue(select, textSpan, valueSpan);

// Hook the `input` event
select.addEventListener("input", () => {
    // Update the contents of the elements
    showTextAndValue(select, textSpan, valueSpan);
}); 
 <label for="language">Choose a language:</label>
<select name="language" id="language-select" value="val1">
<option value="val1">English</option>
<option value="val2">German</option>
</select>
<p>You selected: <span id="text-span"></span></p> <!-- shall display either "English" or "German" -->
<p>You selected the following option: <span id="value-span"></span></p> <!-- shall display either "val1" or "val2" -->
<script  src="./script.js"></script>

(Обратите внимание, что я изменил все три id s.)

Метки: