Jadi saya melakukan proyek dengan tombol yang mengikuti perintah saat diklik. Awal adalah kotak oranye dan perintah saya membuatnya tumbuh, berubah menjadi biru, memudar, atau mengatur ulang. Saya ingin menambahkan tombol "kejutan" yang menggantikan kotak dengan gambar.

Ini adalah salah satu perintah saya di JS untuk Tombol 5. Saya sampai sejauh ini untuk menghapus kotak.

document.getElementById("button5").addEventListener(
    "click",
    function() {
        document.getElementById("box").remove();
    }
);
<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->

</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>
    <button id="button5">Surprise</button>

    <script type="text/javascript" src="javascript.js"></script>

    
</body>
</html>
1
hannahatl 12 Mei 2021, 07:24

5 jawaban

Jawaban Terbaik

Anda dapat menggunakan ini untuk mengaktifkan gambar Anda:

document.getElementById("button5").addEventListener(
    "click",
    function(){
        var box = document.getElementById("box");
        if(box.style.display !== "none"){
          document.getElementById("box").style.display = "none";
          document.getElementById("image").style.display = "block";
          return;
        }
        document.getElementById("box").style.display = "block";
        document.getElementById("image").style.display = "none";
    });
<p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px">
    </div>
    <img id="image" src="https://placekitten.com/150/150" style="display: none; height:150px; width:150px; margin:25px"></img>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>
    <button id="button5">Surprise</button>
0
Prosy Arceno 12 Mei 2021, 04:32
    document.getElementById("button5").addEventListener(
        "click",
        function () {

            document.getElementById("box").innerHTML = "<img src='./img/1.png' />"

        });

Atau

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px">
        <img src="" id="pic">
</div>

document.getElementById("button5").addEventListener(
            "click",
            function () {

                document.getElementById("pic").src = "./img/1.png"

            });
0
刘思远 12 Mei 2021, 04:54

Alih-alih menghapus kotak lengkap, hapus saja warna oranye, dan buat tag img baru untuk menyisipkan gambar di tag div yang sama.

Juga, setiap kali mengklik tombol lain, hapus saja tag img.

Ditambahkan, klik acara untuk dua tombol untuk menunjukkan perilaku.

document.getElementById("button5").addEventListener("click", function () {
  document.getElementById("box").style.backgroundColor = "";
  let img = document.createElement("img");
  img.setAttribute("src", "");  // add the image source here
  img.setAttribute("id", "image");
  img.setAttribute("alt", "image");
  document.getElementById("box").append(img);
})

document.getElementById("button1").addEventListener("click", function () {
  document.getElementById("box").style.backgroundColor = "orange";
  document.getElementById("image").remove();
})
<p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>
    <button id="button5">Surprise</button>
0
Yash Maheshwari 12 Mei 2021, 04:32

Anda dapat menambahkan/menghapus nama classList yang mendefinisikan CSS yang ingin Anda tampilkan di elemen Anda. Dengan gambar, hapus saja kelas kotak dan tambahkan kelas baru yang memiliki gambar sebagai latar belakang.

const buttons = document.querySelectorAll('button')
const box = document.getElementById('box')

function changeBox(e) {
  if (e.target.id === 'button1') {
    box.classList.add('translate')
  } else if (e.target.id === 'button2') {
    box.classList = ''
    box.classList.add('blue')
  } else if (e.target.id === 'button3') {
    box.classList.add('fade')
  } else if (e.target.id === 'button4') {
    box.classList = ''
    box.classList.add('box')
  } else if (e.target.id === 'button5') {
    box.classList.remove('box')
    box.classList.add('img')
  }
}

buttons.forEach(button => {
  button.addEventListener('click', e => changeBox(e))
})
.box {
  height: 150px;
  width: 150px;
  background-color: orange;
  margin: 25px;
}

.img {
  height: 150px;
  width: 150px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/8/81/Stackoverflow_icon.png') no-repeat rgba(0, 230, 230, 0.5);
  margin: 25px;
}

.translate {
  transform: scale(1.2);
  transition: all 1s;
}

.fade {
  opacity: 0;
  animation: fade 1s ease-in-out;
}

.blue {
  height: 150px;
  width: 150px;
  background-color: blue;
  margin: 25px;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
<p>Press the buttons to change the box!</p>

<div id="box" class="box"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>
0
dale landry 12 Mei 2021, 04:51

Anda dapat menambahkan HTML dengan gambar dengan innerHTML dalam Javascript.

Misalnya function addImage() { var newImage=document.getElementById('myBox'); newImage.innerHTML = '<img src="image.jpg" alt="image">'; console.log("add image"); }

0
KryBor_BK 12 Mei 2021, 04:47