我应该选择哪个属性来设置 HTML 元素"text"？

我想用Java Script更改HTML中p或其他标签中的文本

我尝试了许多不同的方法。然而，这些都不是很好。

控制台说。

Uncaught TypeError: Cannot set property 'textContent' of null

<script>
//1 document.getElementById("stackoverflow").textContent="newtext";
//2 document.getElementById("stackoverflow").value ="newtext";
//3 document.getElementById("stackoverflow").innerHTML ="newtext";
<script>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>

两个变化

在元素加载后移动脚本
从标记中删除id

document.getElementById("stackoverflow").textContent="newtext";

<p id="stackoverflow">I wanna change this text</p>

检查你的id，中间没有空格。id是stackoverflow堆栈溢出")

这是完全正常的，只要您在p标签上有两个id属性，只有第一个将被考虑。

let p = document.getElementById("stackoverflow");
console.log(p);

<p id id="stackoverflow">This is a sample paragraph</p>

但是当你移除第一个id时，它应该像预期的那样工作

let p = document.getElementById("stackoverflow")
console.log(p);

<p id="stackoverflow">This is a sample paragraph</p>

let p = document.querySelector("p");
console.log(p.id);

<p id id="stackoverflow">This is a sample paragraph</p>

可以看到id属性为空

有两种方法，

1 -如果你正在做onload事件，你可以把它包装在你的body标签中并调用你的函数
2 -如果是onlclick事件，调用这个函数onclick事件
删除按钮上的评论和onload = "ChangeEvent()">

<!DOCTYPE html>
<html>
<script>
function ChangeEvent() {
document.getElementById("stackoverflow").textContent = "HI";
}
</script>

<body onload="ChangeEvent()">
<p id="stackoverflow">Change</p>
<!-- <button onclick="ChangeEvent()">Clicked</button> -->
</body>
</html>

始终将<script>标签放置在关闭</body>标签之前
正确关闭</script>标签

<head>
<!-- HEAD stuff goes here. link, meta, title etc -->
</head>
<body>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>

<!--
SCRIPTs go here before the closing </body>  
-->
<script>
document.getElementById("stackoverflow").textContent="newtext";
</script>
</body>

解析器阻塞对异步javascript的额外读取

相关内容

最新更新

热门标签：