change page background color page on click
Question
I was trying to change the background of the page color to "black" and the text color inside the card to "white" after clicking the button. When the button is clicked the color changes just for 1 second and goes back to the default color.
In the below code, will show you some parts from the main
The HTML Code:
<div class="card fontOne">
<div>
<hr />
</div>
<ul class="card-items item-1">
<p class="name">Roboto</p>
<button type="submit" class="font-button"><i class="material-
icons"></i></button>
</ul>
<p class="font-creator">Christina Robertson (12 styles)</p>
<p class="font-text cardParagraph">Then came the night of
the first falling star.</p>
</div>
<button class="btn-black" id="bMode" onclick="blackMode()"><i class="far fa-circle bg-black"></i></button>
The JS Code:
const changeToBlack = document.getElementById('bMode');
const text = document.getElementsByClassName('font-text');
changeToBlack.addEventListener('click', blackMode);
function blackMode() {
document.body.style.backgroundColor = "black";
text.style.color = "white";
}
I wrote the code to change only the background color, for the card l dont know how to go about it. So I tried to change only the text color for 1 paragraph which is not working either.
1 answers
solution1
0 2019-11-01 02:48:04
let timeStamp; const changeToBlack = document.getElementById('bMode'); const text = document.getElementById('font-text'); const oriBodyBgColor = document.body.style.backgroundColor; const oriFontColor = text.style.color; changeToBlack.addEventListener('click', function() { if (timeStamp) { clearTimeout(timeStamp) } document.body.style.backgroundColor = "black"; text.style.color = "white"; timeStamp = setTimeout(function() { document.body.style.backgroundColor = oriBodyBgColor; text.style.color = oriFontColor; }, 1000) });
<;DOCTYPE html> <html> <body> <div class="card fontOne"> <div> <hr /> </div> <ul class="card-items item-1"> <p class="name">Roboto</p> <button type="submit" class="font-button"><i class="material- icons">.</i></button> </ul> <p class="font-creator">Christina Robertson (12 styles)</p> <p id="font-text" class="font-text cardParagraph">Then came the night of the first falling star.</p> </div> <button class="btn-black" id="bMode"><i class="far fa-circle bg-black"></i>点我</button> </body> </html>
You could run this code in in jsfiddle. Click me
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.