Ada array dengan data

let mapImages = [
        {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/1.jfif',
                         description: 'picher  1'},
        {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/2.jfif',
                    description: 'picher 2'},......]

Ada beberapa divS

<div class="mini">   </div>


        <div id="myModal" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
                   <img id ="pop" src ="" alt = ""  width="500" height="500" style="border: 2px solid red">
                    </div>
            </div>

Saya ingin gambar array saya ditambahkan ke div kelas mini

function showImages() {
            document.body.innerHTML = "";
            for(let i = 0; i < mapImages.length; i++){
                document.body.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
            }
        }

        showImages();

Masalahnya adalah gambar menghapus semua yang lain di halaman, dan tidak ditambahkan ke div yang diinginkan (kelas mini).

Tanpa menggunakan jquery atau kerangka kerja lainnya

0
Evg 17 Januari 2021, 14:27

3 jawaban

Jawaban Terbaik

Anda menghapus konten body di dalam fungsi, jadi hapus itu. Selain itu, Anda harus memperbarui konten elemen dengan kelas mini alih-alih body:

let mapImages = [
  {way:'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/1.jfif',description: 'picher  1'},
  {way:'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/2.jfif',description: 'picher 2'}
];

var miniClass = document.querySelector('.mini');
function showImages() {
  for(let i = 0; i < mapImages.length; i++){
    miniClass.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
  }
}

showImages();
<div class="mini"></div>


<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id ="pop" src ="" alt = ""  width="500" height="500" style="border: 2px solid red">
  </div>
</div>
1
Mamun 17 Januari 2021, 11:40

Coba ini (dapatkan div menggunakan getElementsByClassName dan tambahkan/tambahkan semua tag gambar Anda)

function showImages() {
   let imgContainer = document.getElementsByClassName('mini')[0];

            for(let i = 0; i < mapImages.length; i++) {
               imgContainer.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
            }
}
1
kiranvj 17 Januari 2021, 11:40

Gunakan id bukan kelas

<div id="mini">   </div>

Dan dapatkan itu

document.getElementById('mini').innerHTML += ....
1
Mario Abbruscato 17 Januari 2021, 11:41