请问我直接使用innerHTML为什么不能修改掉h3标签里面的内容的

源自：1-2 编程练习

请问我直接使用innerHTML为什么不能修改掉h3标签里面的内容的

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
var charater1 = document.getElementById("div1");
function showText(){
    charater1.innerHTML = "hello world";
    document.write(charater1.innerHTML);
}
function showDialog(){
    confirm("准备好了，启航吧！");
}
</script>
</head>
<body>
    <h3 id="div1">let us study JS</h3>
    <form>
        <input type="button" value="showText" onclick=showText()>
        <input type="button" value="showDialog" onclick=showDialog()>
    </form>
</body>
</html>

我想把 h3 里面的内容还为 hello world，但是没有成功。请问这么样才可以替换？

提问者：Summving 2020-10-21 22:03

个回答

过往来生

2020-10-22 16:56:34

已采纳

两种解决方案：
1. var charater1 = document.getElementById("div1");这一句代码移动showText()方法里
2. 把script标签放在body标签内最下面
页面加载默认是从上往下读的在js代码部分那时候还没有p这个标签，因此无法获取该id，证实：在源代码内showText()方法内添加alert(charater1)，在页面点击showText按钮，会看到charater1的值是null
一般建议script标签放在body标签内最下面
以上是个人理解，如有误请原谅

1
慕标1341008

2020-11-14 00:05:31

1、2均可解决问题

0