getElementById——更改HTML内容——开关灯泡

getElementById("ID值")首先给大家分析一下这个get=获取；Element=元素，组合起来就是获取元素的ID，然后进行操作。

innerHTML用于设置返回的更改HTML的内容。

组合起来使用我们就能去修改网页中的元素内容了。

项目实践

首先我们先写个HTML做个按钮开关，并给他ID设置为kg。

<button id="kg">开灯</button>

接着添加点击事件

<button id="kg" onclick=“”>开灯</button>

接着把我们刚刚说的点击改变元素内容加到点击效果里面——点击开灯按钮后，开灯二字变成关灯。

<button id="kg" onclick=“document.getElementById('kg').innerHTML = '关灯';”>开灯</button>

这样我们一个点击开关灯的按钮就做好了。

接着做我们在插入一个灯泡图片。

<img src="https://blog.zmkj.website/wp-content/uploads/2023/02/6a5ba6ab3e105441.gif" alt="灯泡" id="ImgID">

然后当我们点击开灯按钮时候，灯泡亮起（图片更改）

那么我们只需要在点击事件里面加一串改变img标签的这个src属性，那么我们只需要加一串代码就行

<button id="kg" onclick="document.getElementById('ImgID').src='https://blog.zmkj.website/wp-content/uploads/2023/02/d1214cdc01110456.gif';document.getElementById('kg').innerHTML = '关灯';">开灯</button>

这样一来，一个JS实现的开关灯泡的功能就实现了。