<!DOCTYPE html>
<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Squares</title>
        <script type="text/javascript">
        function SayColor(color) {
          document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
        }
        </script>
 </head>

  <body>

    <div style="text-align:center">
    <button onclick="SayColor()> <img src="red-square.png" height="150" width="150" ></button>
    <img src="green-square.png" height="150" width="150"> 
    <img src="blue-square.png" height="150" width="150"> 
    <h3 id="message">
    </h3>
    </div>

</body>
</html>

Ini adalah upaya saya di awal kode, saya tidak yakin bagaimana menyelesaikannya. Saya akrab dengan event handler tetapi tidak function. Saya mencoba menampilkan teks di setiap kotak gambar ketika diklik yang bertuliskan "Anda mengklik kotak [warna persegi]!"

0
Anna Stineburg 22 April 2020, 20:47

1 menjawab

Jawaban Terbaik

Oke saya melihat Anda mendefinisikan fungsi tetapi memerlukan beberapa argumen yang tidak Anda lewati. Dan jika Anda hanya perlu mengklik tidak ada tombol yang diperlukan, seperti yang Anda coba seperti di bawah ini, tambahkan event-handler untuk elemen dom gambar itu sendiri. P.S Anda tidak dapat meneruskannya sebagai merah, karena itu akan kami tidak terdefinisi, jadi berikan nilai string di sini.

    <!DOCTYPE html>
<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Squares</title>
        <script type="text/javascript">
        function SayColor(color) {
          document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
        }
        </script>
 </head>

  <body>

    <div style="text-align:center">
     <img onclick=SayColor("RED") src="red-square.png" height="150" width="150" >
    <img onclick=SayColor("Green") src="green-square.png" height="150" width="150"> 
    <img onclick=SayColor("Blue") src="blue-square.png" height="150" width="150"> 
    <h3 id="message">
    </h3>
    </div>

</body>
</html>

Semoga membantu! Selamat mengkode!

0
Deekshith Anand 22 April 2020, 17:56