So, I’m making a web game, where the site gets mad at you. I’ve completed the anger level internal coding, and I’m currently working on implementing a color-changing feature when the anger level reaches a certain value. I want it to change a few tints redder when the anger level reaches an increment of 10. I don’t often do CSS design, I usually pull some CSS design that I’m allowed to use. But again, I don’t use CSS often. I’ll attach my code below.
JS PORTION
var anger = 0;
// Define a function,
// which you can reuse for the task (inc & set in the DOM)
var incrementAndSet = function() {
anger = anger + 1;
document.getElementById("anger").innerHTML = "Anger level:" + anger;
console.log("Anger level:" + anger);
if (anger === 10) {
console.log("The site is very mad!!")
bgcolor: #ffb347;
}
if (anger === 20) {
console.log("The site is SUPER mad!!!")
bgcolor: #ff8243
}
if (anger === 0) {
bgcolor: #69F7BE;
}
}
// increment and set on click
document.getElementById('btn').onclick = incrementAndSet;
// initialize
incrementAndSet();
HTML PORTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>Hello world!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!-- this is the start of content -->
<h1>
Anger Minigame
</h1>
<p>
This site is a game, meant for you to press the below button,
making the site angrier and angrier.
<button id="btn">Click Me</button>
<div id='anger'>
</div>
</p>
</body>
</html>
Advertisement
Answer
I hope to help you, if the area in which you want to apply the dynamic CSS style is in the DIV with the id “anger”, you can refer to that DIV in the JS in this way
Your Code
var anger = 0;
// Define a function,
// which you can reuse for the task (inc & set in the DOM)
var incrementAndSet = function() {
anger = anger + 1;
document.getElementById("anger").innerHTML = "Anger level:" + anger;
console.log("Anger level:" + anger);
if (anger === 10) {
console.log("The site is very mad!!")
// STYLE FOR DIV WITH ID ANGER
var el = document.getElementById('anger');
el.style.backgroundColor = "#ffb347";
}
if (anger === 20) {
console.log("The site is SUPER mad!!!")
// STYLE FOR DIV WITH ID ANGER
var el = document.getElementById('anger');
el.style.backgroundColor = "#ff8243";
}
if (anger === 0) {
// STYLE FOR DIV WITH ID ANGER
var el = document.getElementById('anger');
el.style.backgroundColor = "#69F7BE";
}
}
// increment and set on click
document.getElementById('btn').onclick = incrementAndSet;
// initialize
incrementAndSet();