Mohon Bimbingannya Abang/Bapak..

saya ingin membuat onmouseover di button 2 memunculkan kalimat dan saat di klik kalimatnya bisa berganti warna. mohon bimbinganya ya bang/bapak..

 <body>
    <button
      id="btn1"
      onclick="clickButton()"
      onmouseover="ubahText()"
      onmouseout="oriText()"
    ></button>
    <button id="btn2" onmouseover="tampilText()" onclick="ubahWarnaText()">
      klik saya 2
    </button>
    <script src="main.js"></script>
  </body>

document.title = " rikimaru";
const body = document.body;
const btn1 = document.getElementById("btn1"); 
const btn2 = document.getElementById("btn2"); 

function tampilText() {
  btn2.style.background = "aqua";
  // munculText.style.color = "black";
  const munculText = document.createElement("p");
  munculText.textContent = "UREK MAZINO !";
  body.append(munculText);
}

function clickButton2() {
  btn2.style.background = "white";
  munculText.style.color = "red";
  body.append(munculText);
}

html javascript

@argachristian

11 Kontribusi 1 Poin

Diperbarui 9 bulan yang lalu

Tanggapan

Sesuaikan judul dengan pertanyaan kamu ya. Baca aturan main cara membuat judul yang baik

@hilmanski

1 Jawaban:

Hi, It seems like you want a tooltip-like feature, but instead of using a tooltip, you're creating a paragraph element which is appended to the body. Furthermore, you also want to change the color of the text when button2 is clicked.

There's a small problem in your existing code: the munculText variable is locally scoped to the tampilText() function, so it cannot be accessed from clickButton2().

To fix this, let's make munculText a global variable. Also, clickButton2 is not attached to any event, so we'll change ubahWarnaText() to clickButton2() in the onclick event for btn2.

Here's the corrected HTML:

And here's the updated JavaScript:

document.title = "rikimaru"; const body = document.body; const btn1 = document.getElementById("btn1"); const btn2 = document.getElementById("btn2");

let munculText; // Declare the variable outside of the functions so it is globally accessible

function tampilText() { btn2.style.background = "aqua";

// Only create a new paragraph if it doesn't exist if (!munculText) { munculText = document.createElement("p"); munculText.textContent = "UREK MAZINO !"; body.append(munculText); } }

function clickButton2() { if (munculText) { btn2.style.background = "white"; munculText.style.color = "red"; } }

This script will display the text when you hover over the button, and change the color of the text when you click on the button. Please ensure that you have properly defined the functions clickButton(), ubahText(), and oriText(), as they are not included in the provided script.

I hope this will help.

@jamesmillere

5 Kontribusi 4 Poin

Dipost 9 bulan yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Mohon Bimbingannya Abang/Bapak..

Kelas Premium!
Belajar bikin website dari nol sekarang