问题描述
在使用js获取div下的p标签并改变其显示的值时,使用getElementsByClassName()方法无法改变其中的值。
HTML代码如下:
<body>
<div class="screen">
<p id="present" class="show">即将开始</p>
</div>
<button id="1" onclick="start()">开始</button>
<button id="2" onclick="end()">结束</button>
</body>
js代码如图所示:
function start() {
var index=parseInt(Math.random()*10);
console.log(index); //打印检查是否获得随机数值
document.getElementsByClassName("show").innerHTML=index;
}
效果如图所示:
点击“开始”后我们可以看到打印出了获得的随机数“5”,但p标签中的文字还是“即将开始”,并没有改变成随机数“5”
解决方法
经笔者实验,使用getElementById()方法获取p标签并用innerHTML方法改变其中的值就可以了。
js代码如下:
function start() {
var index=parseInt(Math.random()*10);
console.log(index);
document.getElementById("present").innerHTML=index;
}
代码运行结果:
这时候我们可以看到,p中的内容已经变成我们想要的随机数啦。
后言
其中原因,笔者也暂不清楚,但会继续查资料学习,若有读者知道,也可以在评论区讨论。