CODEWITHSUNDEEP
javascripthtmlcss
Camashima
Camashima

Reputation: 37

How can you change a CSS value when a JS value reaches a certain value?

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>

Upvotes: 1

Views: 48

Answers (3)

Potier97
Potier97

Reputation: 105

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();

Upvotes: 1

Spectric
Spectric

Reputation: 31992

Store the background color in a variable defined outside of the if statements and apply it after the if statements.

Also, your if statements should be using the > (bigger than) operator rather than the === operator.

We can also remove the need for the final if statement that checks whether anger is 0 by adding a default value to bg.

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);
  var bg = '#69F7BE';
  if (anger > 10) {
    console.log("The site is very mad!!")
    bg = '#ffb347';
  }
  if (anger > 20) {
    console.log("The site is SUPER mad!!!")
    bg = '#ff8243';
  }

  document.body.style.backgroundColor = bg;

}
// increment and set on click
document.getElementById('btn').onclick = incrementAndSet;

// initialize
incrementAndSet();
<!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>

Upvotes: 1

dreamLo
dreamLo

Reputation: 1860

document.body.style.backgroundColor = '#ffb347' means that the document.body with the style property and the backgroundColor style, will receive the value #ffb347

There was also a mistake in your code where you started the increment at 0 and then increase it to 1 on the first click, so anger === 0 would never be reached. So I changed it to start at -1.

var anger = -1;
// 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!!") 
document.body.style.backgroundColor = '#ffb347'
}
  if (anger === 20) {
//console.log("The site is SUPER mad!!!")
document.body.style.backgroundColor = '#ff8243'
}
  if (anger === 0) {
document.body.style.backgroundColor = '#69F7BE'
}
}
// increment and set on click
document.getElementById('btn').onclick = incrementAndSet;

// initialize
incrementAndSet();
<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>

Upvotes: 1

Related Questions