文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript语法getElementById outerHTML

问Javascript语法getElementById outerHTML
EN

Stack Overflow用户

提问于 2020-11-25 16:55:34

回答 1查看 68关注 0票数 0

我有一个关于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文件中，它将显示它的值和变量。我不知道该怎么做。

javascript

getelementbyid

outerhtml

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-25 17:09:11

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

我想你是在问如何：

在两个span和

中显示当前选择的选项的文本和值。

如何更新用户更改所选内容时显示的内容.

如果只需要选定的值，则可以使用select元素的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作为函数的参数。

当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。)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65009334

复制

相似问题

问Javascript语法getElementById outerHTML
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript语法getElementById outerHTMLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript语法getElementById outerHTML
EN