javascript - 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 文件中,它应该显示它的值和变量。我不知道该怎么做。
解决方案
一个文档中不能有多个具有相同id
值的元素;您当前的标记id="language"
在三个不同的元素上使用。您至少需要更改其中两个。
我想你在问如何:
span
在两个s中显示当前选择的选项的文本和值,和如果用户更改选择,如何更新您显示的内容。
如果您只想要选定的值,则可以使用元素的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
and 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。)
推荐阅读
- c++ - 为什么 C++ 程序无法在 GCC 和 Clang 上编译?
- python - 使 Tab 键在文本框 tkinter 中执行 4 个空格而不是 8 个空格
- google-polyline - 渲染谷歌地图折线编码
- postgresql - 5:输入/输出错误错误:执行失败;`/bin/launchctl bootstrap gui/502 和 FATAL:用户的密码验证失败
- android-studio - Android Studio权限请求ID
- javascript - 无论如何强制PDF从电子邮件中的超链接打开/预览?
- bash - 在 shell 脚本中使用 jenkins 管道中的环境变量而不直接传入它们
- r - 计算R中列表中元素的对数?
- sql - 根据另一列和日期中的值实现一个月的增量值
- django - 如何在 Django 管理 UI 的文本区域中保留空行?