Javascript: как изменить Источник изображения onclick
У меня есть 10 изображений в теле и кнопка перемещения. Когда я нажимаю на кнопку Переместить, мне нужно изменить первое и последнее изображения. Как я могу это сделать?
Что я уже пробовал:
Я уже пробовал вот так`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework 6</title>
<style>
#btn1{
width: 100px;
height: 30px;
margin: 50px 0 0 600px;
}
.d1{
float: left;
margin: 1px;
width: 130px;
height: 130px;
background-size: cover;
}
</style>
</head>
<body>
<div class="d1" style="background-image: url(Images/1.jpg)"></div>
<div class="d1" style="background-image: url(Images/2.jpg)"></div>
<div class="d1" style="background-image: url(Images/3.jpg)"></div>
<div class="d1" style="background-image: url(Images/4.jpg)"></div>
<div class="d1" style="background-image: url(Images/5.jpg)"></div>
<div class="d1" style="background-image: url(Images/6.jpg)"></div>
<div class="d1" style="background-image: url(Images/7.jpg)"></div>
<div class="d1" style="background-image: url(Images/8.jpg)"></div>
<div class="d1" style="background-image: url(Images/9.jpg)"></div>
<div class="d1" style="background-image: url(Images/10.jpg)"></div>
<button onclick="move()" id="btn1">Move</button>
</body>
<script src="JS/script.js"></script>
</html>
function move(){
var arr = document.querySelectorAll(".d1")
arr[0].style.background = url("../Images/10.jpg");
arr[10].style.background = url("../Images/1.jpg");
}