Is it possible to adjust a CSS value once a JS value hits a specific threshold?

Question

Is it possible to adjust a CSS value once a JS value hits a specific threshold?

Currently, I am developing a web game where the website displays different emotions, including anger. I have successfully implemented the anger level internal coding and I am now focusing on adding a color-changing feature when the anger level reaches a specific value. My goal is to have the color shift slightly towards red when the anger level increases by 10. While I am not very experienced with CSS design, I usually incorporate existing designs that are available for use. Below, you can find the code that I am currently working with.

JavaScript Section

var anger = 0;
// Create a function that increments the anger level and updates 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 Section

<!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>

javascript html css

Answer 1

Answer №1

If you are looking to implement a dynamic CSS style within the DIV element with the id "anger", you can achieve this by referencing the DIV in your JavaScript code as shown below:

Your Updated Code

var anger = 0;
// Create a reusable function to increment and set the value within 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!!");
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#ffb347";
  }

  if (anger === 20) {
    console.log("The site is SUPER mad!!");
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#ff8243";
  }

  if (anger === 0) {
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#69F7BE";
  }

}
// Call the incrementAndSet function when the button is clicked
document.getElementById('btn').onclick = incrementAndSet;

// Initialize the function
incrementAndSet();

Answer 2

If you are looking to implement a dynamic CSS style within the DIV element with the id "anger", you can achieve this by referencing the DIV in your JavaScript code as shown below:

Your Updated Code

var anger = 0;
// Create a reusable function to increment and set the value within 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!!");
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#ffb347";
  }

  if (anger === 20) {
    console.log("The site is SUPER mad!!");
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#ff8243";
  }

  if (anger === 0) {
    // Apply style changes to the DIV with ID "anger"
    var el = document.getElementById('anger');
    el.style.backgroundColor = "#69F7BE";
  }

}
// Call the incrementAndSet function when the button is clicked
document.getElementById('btn').onclick = incrementAndSet;

// Initialize the function
incrementAndSet();

Answer 3

Answer №2

document.body.style.backgroundColor = '#ffb347'

signifies that the document.body element's style property, specifically the backgroundColor style, will be set to the color #ffb347

I also identified an error in your code where the increment started at 0 and then increased to 1 on the initial click, causing anger === 0 to never be achieved. Therefore, I adjusted it to commence at -1.

var anger = -1;
// Creating a function that can be reused for incrementing and setting in the DOM
var incrementAndSet = function() {
anger = anger + 1;
document.getElementById("anger").innerHTML = "Anger level:" + anger;
if (anger === 10) {
document.body.style.backgroundColor = '#ffb347'
}
  if (anger === 20) {
document.body.style.backgroundColor = '#ff8243'
}
  if (anger === 0) {
document.body.style.backgroundColor = '#69F7BE'
}
}
// Triggering increment and set function on click
document.getElementById('btn').onclick = incrementAndSet;

// Initializing the function
incrementAndSet();

<h1>
      Anger Minigame

    </h1>
    <p>
      Welcome to the anger minigame. Click the button below to increase the site's anger level.

      <button id="btn">Click Me</button>

      <div id='anger'>
      </div>

    </p>

Answer 4

document.body.style.backgroundColor = '#ffb347'

signifies that the document.body element's style property, specifically the backgroundColor style, will be set to the color #ffb347

I also identified an error in your code where the increment started at 0 and then increased to 1 on the initial click, causing anger === 0 to never be achieved. Therefore, I adjusted it to commence at -1.

var anger = -1;
// Creating a function that can be reused for incrementing and setting in the DOM
var incrementAndSet = function() {
anger = anger + 1;
document.getElementById("anger").innerHTML = "Anger level:" + anger;
if (anger === 10) {
document.body.style.backgroundColor = '#ffb347'
}
  if (anger === 20) {
document.body.style.backgroundColor = '#ff8243'
}
  if (anger === 0) {
document.body.style.backgroundColor = '#69F7BE'
}
}
// Triggering increment and set function on click
document.getElementById('btn').onclick = incrementAndSet;

// Initializing the function
incrementAndSet();

<h1>
      Anger Minigame

    </h1>
    <p>
      Welcome to the anger minigame. Click the button below to increase the site's anger level.

      <button id="btn">Click Me</button>

      <div id='anger'>
      </div>

    </p>

Answer 5

Answer №3

Storing the background color in a variable outside of the if conditions and applying it after the if blocks will optimize your code.

Consider using the > operator instead of the === operator in your if statements.

Eliminating the final if statement that checks if anger is 0 can be achieved by assigning a default value to bg.

var anger = 0;
// Create a function that increments and sets the anger level
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;

}
// Call the function on button click
document.getElementById('btn').onclick = incrementAndSet;

// Initialize the function
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>
  <!-- Game starts here -->
  <h1>
    Anger Minigame

  </h1>
  <p>
    This game allows you to make the site angrier by clicking the button below.

    <button id="btn">Click Me</button>

    <div id='anger'>
    </div>

  </p>
</body>

</html>

Answer 6

Storing the background color in a variable outside of the if conditions and applying it after the if blocks will optimize your code.

Consider using the > operator instead of the === operator in your if statements.

Eliminating the final if statement that checks if anger is 0 can be achieved by assigning a default value to bg.

var anger = 0;
// Create a function that increments and sets the anger level
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;

}
// Call the function on button click
document.getElementById('btn').onclick = incrementAndSet;

// Initialize the function
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>
  <!-- Game starts here -->
  <h1>
    Anger Minigame

  </h1>
  <p>
    This game allows you to make the site angrier by clicking the button below.

    <button id="btn">Click Me</button>

    <div id='anger'>
    </div>

  </p>
</body>

</html>

Is it possible to adjust a CSS value once a JS value hits a specific threshold?

Answer №1

Answer №2

Answer №3

Similar questions

The function is attempting to access the 'lockDatabase' property of an undefined object, resulting in an error

Tips on personalizing the DateTimePicker component from Material-UI

Concealing HTML content with a modal overlay

What is the best way to include default text in my HTML input text field?

Having trouble locating module '@mdx-js/mdx' in Gatsby forest

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

When I access the browser, it displays "???"" symbols instead of UTF-8 characters

Transmitting PHP arrays to JavaScript through AJAX

Is a streamlined jQuery version of the Slider control designed specifically for mobile devices on the horizon?

Showcase your skills in CSS, HTML, and Javascript

The code functions correctly when retrieving information from a file, however, encounters issues when retrieving data

Using JavaScript to parse an XML document on a WAMP server

"Vue js: Embracing Labeling and Agile Transformation in Dynamic

JS and MUI are combining forces to create a dynamic background change on the page when selecting items from a dropdown menu

Having trouble with basic authorization for Facebook API using JavaScript?

Creating a material texture with file api in three.js is a straightforward process

Tips for setting the correct width for a DIV in Internet Explorer 8

"Help! I'm facing an issue with my PHP PDO insert statement

Creating a webpage with HTML through C++

How can I handle pings in Discord using discord.js?