Guys, how to make the text style change when pressing the button using Javascript code? like, from normal text to Fantasy style.

Answer 1

assign a class name, id or data attribute to your HTML-Tag which includes the text like:
<p class="text">Hello World</p>
<button id="style_changer">Click Me</button>
Now store the specific tags in variables in JS:
let text = document.querySelector(".text")
let btn = document.getElementById("style_changer")
Now create a click event and manipulate css with JS. For Example the Font-Family
btn.addEventListener("click", ( ) => {
text.style.fontFamily = "Arial";
})

Answer 2

you can do it with just css by creating a pseudo class active and hover and assigning a different style to it.

Answer 3

Clement Joshua Anthony
pure css:
https://code.sololearn.com/W9zA4tM7e2Nr/?ref=app

Answer 4

If this:
I press the button, the text style changed, i pressed the button again, the text style changed.
if I want that to happen, do I have to make the same javascript code?

Answer 5

use classList.toggle()

Answer 6

classList.toggle()????? Can you explain the code?

Answer 7

here: (you can even change the textContent with js)
https://code.sololearn.com/WM9U68iaPFbZ/?ref=app

Answer 8

Oh. It is can change text style too?

Answer 9

Clement Joshua Anthony
There are a lot of things you can do in js.
You can change font size, style, color, etc as individual attributes, or even modify other elements with javascript.
Switching classes with js is another way.
In my code font-changeJs, using javascript, I changed the button style by toggling class "horror", changed the button text from "Click Me" to "Welcome", changed the body background color again by toggling class "dark" and incremented a counter... all from one button click.
you can get very creative results with css and js, but you have to really practice and read up on the functionalities.

Answer 10

Oh. Ok. Thanks

Answer 11

https://code.sololearn.com/W2MN90NbQbwB/?ref=app
You can do that with css and html just, like this 👆, it's better than used the hover