getelementbyid 内部文本不起作用

Posted 2023-05-07

【中文标题】getelementbyid 内部文本不起作用

【英文标题】：getelementbyid innertext not working

【发布时间】：2013-12-02 23:03:11

【问题描述】：

您好，尝试使用 getelementbyid 和 innerText 但它在任何浏览器中都不起作用。当我打开错误控制台时，我收到以下错误消息

TypeError: 'null' 不是一个对象（评估 'document.getElementById("username").innerText = name'）

这是我的代码：

<script>
alert("Using javascript","");
var name = prompt("Please enter your name?", "");
var course = prompt("What course are you studying?", "");
document.getElementById("username").innerText = name;
document.getElementById("usercourse").innerText = course;
</script>

我不知道为什么会收到 null 错误。

【问题讨论】：

您可能在引用的元素存在之前运行脚本。另请注意，Firefox 不支持 innerText，它在 FF 中是 textContent。

确保您的网页包含具有 id 属性的元素

您的 html 在哪里。在引用它们之前，您的 HTML 中应该有 ID 为“username”和“usercourse”的元素...

【参考方案1】：

使用这个：

document.getElementById("username").value = name;
document.getElementById("usercourse").value = course;

这行得通。

【参考方案2】：

让我通过在解释之前提供答案来解决您的问题...

Working Solution

HTML 更改...

USERNAME:<label id="username"></label>
         <br>
USER COURSE:<label id="usercourse"></label>

说明：现在 HTML 非常混乱，我相信不同的人可能会以不同的方式做到这一点，但是我想告诉你的是，如果一个元素不存在，你就不能引用它......

getElementByID 本身是不言自明的。在您的问题中，您在哪里看到您尝试引用的 2 个 id，因此控制台中出现“null”错误。您的 HTML 必须有这 2 个 ID。您可以从 javascript 动态添加元素，但这是另一个问题。

回到解决方案。

innerText 不适用于 Mozilla，因为它是 Internet Explorer 属性。它确实适用于 Chrome，但不适用于 FF。因此，您应该考虑使用

Node.textContent