innerHTML 没有正确更新

Posted 2023-05-07

【中文标题】innerHTML 没有正确更新

【英文标题】：innerHTML not updating properly

【发布时间】：2012-01-31 09:18:33

【问题描述】：

我正在尝试在 javascript 中构建一些基本的 html 表单验证。我的表单保存在一个表格中，每个输入的右侧都有一个额外的列，ID 为“ErrorX”，最初填充了一些文本以显示它是必填字段。

<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
 <TR>
  <TD ALIGN=LEFT>Your name:</TD>
  <TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
  <TD ALIGN=LEFT ID="Error1">Required</TD>
 </TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>

按下提交按钮时，我的代码会验证字段并尝试更改最右侧的列文本。执行此操作的代码行是：

document.getElementById("Error1").innerHTML = "ERROR";

代码执行并正确检测到错误，并删除现有的措辞，但没有出现新的文本。如果我查询 document.getElementById("Error1").innerHTML 的值，我会得到正确的文本，但它没有出现在屏幕上。

我使用的是 Safari v5.1.2，它适用于我从网上复制的基本示例，所以我认为这是我的代码而不是浏览器。

【问题讨论】：

可能是表单被发布，因此重新加载，所以您看不到它有效吗？你在验证中返回 false 吗？

可能想要修复您的 HTML，大量错误（没有双引号，在提交按钮中使用 -> 而不是网络安全等效项），您是否偶然使用了首页？

恕我直言，您应该在 JavaScript 之前学习 HTML 的基础知识。您的示例 HTML 看起来像 HTML 4.0，应该被 XHTML 1.x 或 HTML 5 替换。有关更多帮助，请参阅 w3schools.com/html。

需要更多信息。我在三个浏览器上测试了代码，包括 Windows 版本的 Safari 5.1.2，没问题，当 validateForm() 被简单地定义为进行赋值并返回 false 时。问题显然出在到目前为止所描述的部分之外的其他地方。

感谢您的所有帮助。我确实在验证函数中返回了 false - 但你确实让我想知道......

【参考方案1】：

innerHTML 在 safari 中肯定有效。看这个演示http://jsfiddle.net/zxMKM/

显而易见的原因是您的 html 标记无效，并且浏览器会自行进行错误恢复并在此过程中生成自己的 DOM。 所以请验证你的 html http://validator.w3.org/

另外请注意td.innerHTML 对 IE8 是只读的。 所以，它更适合跨平台使用td.innerText

【讨论】：

“显而易见的原因是您的 html 标记无效” 您在说什么无效标记会导致这种行为？

@不是我：请仔细阅读问题。 op 只发布了他的部分标记。我很确定 html 里面会有一个无效的标记。如果您认为此标记有效。那么这是html5出现的另一个原因。 xhtml 太宽容了。

XHTML 是 less 宽容的。您“非常确定” 页面上有 other 无效标记是无关紧要的。 唯一 HTML4/5 验证问题是提交<input> 应该嵌套在另一个元素中。此问题的原因不是验证。

:) 告诉我任何其他情况，innerhtml 对 safari 中的 td 不起作用？当我提到宽恕不区分大小写时，我也没有提到区分大小写。我收回我的原谅评论

很高兴为您提供帮助，如果您想在 IE 上使用，请使用 innerText

【参考方案2】：

我在 iPAD safari 上遇到了类似的问题，它没有正确更新 div 值。 我浏览了很多帖子并尝试了很多选项，但对我有用的是 text()。

【参考方案3】：

<td align="left"><div id="Error1">Required</div></td>

【讨论】：

align=".." 现在已经被描述了，你应该使用 CSS 来对齐文本

这个-1有点苛刻。将错误嵌套在元素中可以消除无效的标记效果。 @craig123!: label 而不是 div 会更贴切。