Javascript 语法 getElementById outerHTML答案

【问题标题】：Javascript Syntax getElementById outerHTMLJavascript 语法 getElementById outerHTML
【发布时间】：2021-03-08 14:00:11
【问题描述】：

我有一个关于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 文件中，它应该显示它的值和变量。我不知道如何继续。

【问题讨论】：

在一个文档中不能有多个具有相同id 值的元素（上面有三个）。如果你仍然这样做，它是一个无效的文档，理论上浏览器可以做它想做的任何事情（包括完全忽略id）。实际上，他们所做的就是让getElementById 为您提供文档中的first 元素以及id。他们并没有完全忽略后面元素上的id，他们只是给予第一个优先级。但不要依赖它。如果您有多个元素，请使用其他方法来识别元素。
嗨，是的，这首先是语法问题。如何引用 ID 以便将变量或值放在 span 元素之间？

标签： javascript getelementbyid outerhtml

【解决方案1】：

文档中不能有多个元素具有相同的id 值；您当前的标记在三个不同的元素上使用 id="language"。您至少需要更改其中两个。

我想你是在问如何：

在两个spans中显示当前选择的选项的文本和值，并且
如果用户更改选择，如何更新您显示的内容。

如果您只想要选定的值，您可以使用select 元素的value 属性。但是对于文本和值，您需要 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 和 spans 作为函数的参数。

您会在页面加载时调用该函数，然后在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>

（请注意，我更改了所有三个ids。）

【讨论】：