Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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);
}
Tanggapan
Sesuaikan judul dengan pertanyaan kamu ya. Baca aturan main cara membuat judul yang baik
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:
<body> <button id="btn1" onclick="clickButton()" onmouseover="ubahText()" onmouseout="oriText()"> </button> <button id="btn2" onmouseover="tampilText()" onclick="clickButton2()"> klik saya 2 </button> <script src="main.js"></script> </body>
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.
