Доброго времени суток.
Никак не получается скопировать/сдублировать картинку и из одного <div> в другой <div>.
Алгоритм таков:
Дан двумерный массив (15Х3) содержащий картинки;
Надо:
1. по клику на кнопку меню (id="menu") вставить соответствующие картинки в 3 кнопки (<div class="room">) в выпадающем окне (<dialog id = "dial">);
2. по клику на кнопку "room" вставить ту же картинку в <div id="pic">, при этом сама кнопка "room" должна остаться на месте вместе с содержимым.
Вот пункт 2 у меня и не получается. DevTools ошибок не выдает, а "pic" так и остается пустым.
Что я делаю не так ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>TT</title>
<style>
#menu{width: 80vw; height: 20vh; border: 1px solid red;}
.cell{width: 20vw; height: 20vh; border: 1px solid black;}
#dial{width: 80vw; height: 60vh; border: 1px solid green;}
#packaging { width: 70vw; height: 60vh; display: flex; flex-direction: row;}
#pic{width: 80vw; height: 60vh; border: 1px solid blue;}
#keypad{ width: 5vw; height: 60vh; border: display: flex;flex-direction: column;}
.room {width: 5vw;height: 5vw;border: 1px solid black;}
#home {width: 5vw;height: 5vw;border: 1px solid black;}
.fond {width: 5vw;height: 5vw;}
</style>
</head>
<body>
<div id="menu">
<button class="cell">1</button><button class="cell">2</button><button class="cell">3</button>
</div>
<dialog id = "dial">
<div id="packaging">
<div id="pic"><img class="fond0" src=""></div>
<div id="keypad">
<div class="room"><img class="fond" src=""></div>
<div class="room"><img class="fond" src=""></div>
<div class="room"><img class="fond" src=""></div>
</div>
</div>
</dialog>
<script>
const inset = [["apricot", "apple", "avocado",],
["butterfly", "bug", "bear"],
["crow", "cat", "cup"]];
let activeCell;
let cell = document.querySelectorAll(".cell");
let dial = document.getElementById("dial");
let fond = document.querySelectorAll(".fond");
let fond0 = document.querySelectorAll(".fond0");
let room = document.querySelectorAll(".room");
let pic = document.getElementById("pic");
for (let i = 0; i < inset.length; i++){
cell[i].addEventListener("click", function( ) {
activeCell = i;
dial.show();
for (let j = 0; j < room.length; j++) {
fond[j].src = "pic/".concat(inset[activeCell][j].concat(".webp"));
};
for (let j = 0; j < room.length; j++) {
room[j].addEventListener("click", function( ) {
fond0.src = "pic/".concat(inset[activeCell][j].concat(".webp"));
});
};
})
};
</script>
</body>
</html>