作业要去:
实现一个简单的开关按钮:
当点击按钮之后,按钮的文本修改为 “活力全----关” , 并且删除下面的图片。
再点击,将按钮的文本修改回来,并且再次添加一张图片。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业3-开关</title>
</head>
<body>
<div id="b-box">
<input type="button" name="" id="switch" value="火力全开" onclick="fullFire()"/>
<div id="imgSpace">
</div>
</div>
<script type="text/javascript">
function fullFire(){
var btnDom = document.getElementById("switch");
var imgDivDom = document.getElementById("imgSpace");
if(btnDom.value == "火力全关"){
var delImgDom = document.querySelector("[src='full-fire.jpg']")
btnDom.value = "火力全开";
delImgDom.remove();
}else{
var imgDom = document.createElement("img");
imgDom.src = "full-fire.jpg";
btnDom.value = "火力全关";
imgDivDom.appendChild(imgDom);
}
}
</script>
</body>
</html>