I created an array of 6 images and tried to display them, but instead of the images I got the text:
object HTMLImageElement
<div class="box">
<button class="button1"><img src="/img/img (1).jpg"></button>
<button class="button1"><img src="/img/img (2).jpg"></button>
<button class="button1"><img src="/img/img (3).jpg"></button>
<button class="button1"><img src="/img/img (4).jpg"></button>
<button class="button1"><img src="/img/img (5).jpg"></button>
<button class="button1"><img src="/img/img (6).jpg"></button>
</div>
<div class="box-1">
<i id="img"><img src="/img/img (1).jpg"></i>
</div>
let buttons = document.querySelectorAll('.button1')
Array.from(buttons).forEach((button) => {
button.addEventListener('click', (e) => {
document.getElementById('img').innerHTML = `${e.target}`;
})
})