gpt4 book ai didi

javascript - 为什么 innerHTML 不反射(reflect)在 html 表单中所做的更改?

转载 作者:太空狗 更新时间:2023-10-29 15:37:26 25 4
gpt4 key购买 nike

这是我的 html 文件的一部分:

<form id="foo">
<select>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</form>

现在,当我使用以下 javascript 代码时,它会为我提供表单的确切内容:

alert(getElementById("foo").innerHTML);

但是,在我更改了表单的选项后,上面的代码仍然返回以前版本的表单内容。

例如,假设我已将选项从“1”切换为“2”。在这种情况下,我希望上面的 javascript 代码返回表单的内容,并选择了选项“2”;但无论我如何更改表单,它始终会返回表单内容的原始版本。

最佳答案

内容属性显示初始状态。

IDL 属性(又名属性)显示当前状态。

例如,假设我们有这样的文本输入:

<input value="foo" />

它的默认文本是“foo”。让我们把它改成“酒吧”。然后,

  • input.getAttribute('value') 将是初始值:"foo"
  • input.defaultValue 将等同于上面的内容:"foo"
  • input.value 将是当前值:"bar

var inp = document.querySelector('input');
(inp.oninput = function() {
document.getElementById('attr').textContent = inp.getAttribute('value');
document.getElementById('defVal').textContent = inp.defaultValue;
document.getElementById('val').textContent = inp.value;
})();
<input value="foo" />
<p>Attribute: <span id="attr"></span></p>
<p>Default value: <span id="defVal"></span></p>
<p>Value: <span id="val"></span></p>

在你的情况下,它发生了类似的事情。 innerHTML 仅显示 HTML 标记,其中包括内容属性(反射(reflect)初始状态)但不包括 IDL 属性(当前状态)。

如果您想要当前状态,请使用 IDL 属性读取它,而不是使用 innerHTML

关于javascript - 为什么 innerHTML 不反射(reflect)在 html 表单中所做的更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30549714/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com