image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.img{
float: left;
}
</style>
</head>
<body>
<div id="bigImg">
<img src="img/big1.jpg" >
</div>
<div class="img">
<img src="img/simg1.jpg" >
</div>
<div class="img">
<img src="img/simg2.jpg" >
</div>
<div class="img"><img src="img/simg3.jpg" ></div>
<script type="text/javascript">
let img=document.querySelectorAll('.img>img')
let bigImg=document.querySelector("#bigImg>img")
for(let i=0;i<img.length;i+=1){
img[i].addEventListener('mouseover',()=>{
bigImg.src=`img/big${i+1}.jpg`
})
}
</script>
</body>
</html>
2
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button><input type="checkbox"/>A</button>
<button><input type="checkbox"/>B</button>
<button><input type="checkbox"/>C</button>
<button><input type="checkbox"/>D</button>
<button><input type="checkbox"/>E</button>
<script type="text/javascript">
let btn = document.querySelectorAll('button')
for (itme of btn){
itme.addEventListener('click',(evt)=>{
let checkBox=evt.target.firstChild
checkBox.checked=!checkBox.checked
evt.target.style.backgroundColor=checkBox.checked? "green":"red"
}
)
}
</script>
</body>
</html>
