Display a div in a specific color depending on whether the value is positive or negative, and

Question

Display a div in a specific color depending on whether the value is positive or negative, and

I created a counter but I want to change the color of the id="clicks" based on whether the value is positive or negative, and also add text accordingly.

     var clicks = 0;
    function clickplus() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
 }
  var clicks = 0;
    function clickless() {
        clicks -= 1;
        document.getElementById("clicks").innerHTML = clicks;
 }

         #btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
   #btn_less{
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}

<body style="background-color:#F0F0F0">
  <center>
    </br></br></br>
    <h1>
      <p style="color:#002244">COUNT: <a id="clicks">0</a></p>
    </h1>
    <button id="btn_plus" type="button" onClick="clickplus()">+1</button>
    <button id="btn_less" type="button" onClick="clickless()">-1</button>
    </center>
    </body>

Is there anyone who can assist? Change the color of id="clicks" to red if the value is negative, green if it's positive, and display the text positive/negative accordingly.

javascript html css

Answer 1

Answer №1

Utilize

document.getElementById("clicks").style.color = color;

<body style="background-color:#F0F0F0">
<center></br></br></br><h1><p style="color:#002244">CONTAGEM: <a id="clicks">0</a></p></h1>
<button id="btn_plus" type="button" onClick="clickplus()">+1</button>
<button id="btn_less" type="button" onClick="clickless()">-1</button>

    
    </center>
    </body>
    <script>
    var clicks = 0;
    function setColorAndText(clicks){
      let color = (clicks<0)?"red":(clicks>0)?"green":"black";
      let appendText = (clicks<0)?"negative":(clicks>0)?"positive":"";
      document.getElementById("clicks").innerHTML = clicks + " " + appendText;
      document.getElementById("clicks").style.color = color;
    }
    
    function clickplus() {
        clicks += 1;
        setColorAndText(clicks);    
    }
  
    function clickless() {
        clicks -= 1;
        setColorAndText(clicks);           
    }
    </script>
    
    <style>
         #btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
   #btn_less{
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
    </style>

Answer 2

Utilize

document.getElementById("clicks").style.color = color;

<body style="background-color:#F0F0F0">
<center></br></br></br><h1><p style="color:#002244">CONTAGEM: <a id="clicks">0</a></p></h1>
<button id="btn_plus" type="button" onClick="clickplus()">+1</button>
<button id="btn_less" type="button" onClick="clickless()">-1</button>

    
    </center>
    </body>
    <script>
    var clicks = 0;
    function setColorAndText(clicks){
      let color = (clicks<0)?"red":(clicks>0)?"green":"black";
      let appendText = (clicks<0)?"negative":(clicks>0)?"positive":"";
      document.getElementById("clicks").innerHTML = clicks + " " + appendText;
      document.getElementById("clicks").style.color = color;
    }
    
    function clickplus() {
        clicks += 1;
        setColorAndText(clicks);    
    }
  
    function clickless() {
        clicks -= 1;
        setColorAndText(clicks);           
    }
    </script>
    
    <style>
         #btn_plus{
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
   #btn_less{
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;}
    </style>

Answer 3

Answer №2

Check out this updated script utilizing delegation, eventListener, and appropriate CSS styling (avoiding the deprecated center)

I've also rearranged the buttons since it's more common for people to associate negative values with positions to the left of zero

const container = document.getElementById('centerDiv');
const clickCounter = document.getElementById('clicks');
const posNeg = document.getElementById('posneg');
let clicks = 0;

const clickAction = (e) => {
  let target = e.target.closest('button.btn');
  if (!target) return; // not one of the buttons
  let increment = target.id === 'btn_plus' ? 1 : -1;
  clicks += increment;
  clickCounter.textContent = clicks;
  posNeg.classList.toggle('neg', clicks < 0);
  posNeg.classList.toggle('pos', clicks > 0);

};

container.addEventListener('click', clickAction);

body {
  background-color: #F0F0F0
}

#centerDiv {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.btn {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_plus {
  background-color: #04AA6D;
  /* Green */
}

#btn_less {
  background-color: red;
}

.pos::after {
  color:  #04AA6D;
  content: 'Positive'
}
.neg::after {
  color: red;
  content: 'Negative'
}

<div id="centerDiv">
  <h1>
    <p id="counter" style="color:#002244">COUNT: <a id="clicks">0</a> <span id="posneg"></span></p>
  </h1>
  <button id="btn_less" class="btn" type="button">-1</button>
  <button id="btn_plus" class="btn" type="button">+1</button>
</div>

Answer 4

Check out this updated script utilizing delegation, eventListener, and appropriate CSS styling (avoiding the deprecated center)

I've also rearranged the buttons since it's more common for people to associate negative values with positions to the left of zero

const container = document.getElementById('centerDiv');
const clickCounter = document.getElementById('clicks');
const posNeg = document.getElementById('posneg');
let clicks = 0;

const clickAction = (e) => {
  let target = e.target.closest('button.btn');
  if (!target) return; // not one of the buttons
  let increment = target.id === 'btn_plus' ? 1 : -1;
  clicks += increment;
  clickCounter.textContent = clicks;
  posNeg.classList.toggle('neg', clicks < 0);
  posNeg.classList.toggle('pos', clicks > 0);

};

container.addEventListener('click', clickAction);

body {
  background-color: #F0F0F0
}

#centerDiv {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.btn {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_plus {
  background-color: #04AA6D;
  /* Green */
}

#btn_less {
  background-color: red;
}

.pos::after {
  color:  #04AA6D;
  content: 'Positive'
}
.neg::after {
  color: red;
  content: 'Negative'
}

<div id="centerDiv">
  <h1>
    <p id="counter" style="color:#002244">COUNT: <a id="clicks">0</a> <span id="posneg"></span></p>
  </h1>
  <button id="btn_less" class="btn" type="button">-1</button>
  <button id="btn_plus" class="btn" type="button">+1</button>
</div>

Answer 5

Answer №3

To implement a styling feature in your HTML document, you can start by defining a CSS class named .negative with the property color: red. This class will be used to dynamically change the text color based on certain conditions. By utilizing the element.classList.toggle() method, you can easily toggle the presence of this class depending on whether the value meets specific criteria. Additionally, pseudo-elements like ::after can also be employed through CSS to enhance the visual presentation of elements.

let total = 0;

const BUTTONS_LIST = document.querySelectorAll('button');

BUTTONS_LIST.forEach(button => {
  button.addEventListener('click', function() {
    switch (this.id) {
      case 'btn_increase':
        total++;
        break;
      case 'btn_decrease':
        total--;
        break;
    }
    currentValue.value = count;
    currentValue.classList.toggle('negative', (count < 0));
  })
})

body {
  background-color: #EFEFEF;
  margin-top: 4rem;
}

div{
  color: #112233;
  font-size: 2.1em;
  font-weight: 800;

  output {
    color: navy;
    &.negative {
      color: red;
      &::after {
        content: ' negative';
      }
    }
    &::after {
      content: ' positive';
    }
  }
}

#btn_increase {
  background-color: #23AB56;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_decrease {
  background-color: crimson;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<body style="background-color:#F0F0F0">
    <div>TOTAL: <output id="currentValue" role="spinbutton">0</output></div>
    <button id="btn_increase" type="button">+1</button>
    <button id="btn_decrease" type="button">-1</button>
</body>

Answer 6

To implement a styling feature in your HTML document, you can start by defining a CSS class named .negative with the property color: red. This class will be used to dynamically change the text color based on certain conditions. By utilizing the element.classList.toggle() method, you can easily toggle the presence of this class depending on whether the value meets specific criteria. Additionally, pseudo-elements like ::after can also be employed through CSS to enhance the visual presentation of elements.

let total = 0;

const BUTTONS_LIST = document.querySelectorAll('button');

BUTTONS_LIST.forEach(button => {
  button.addEventListener('click', function() {
    switch (this.id) {
      case 'btn_increase':
        total++;
        break;
      case 'btn_decrease':
        total--;
        break;
    }
    currentValue.value = count;
    currentValue.classList.toggle('negative', (count < 0));
  })
})

body {
  background-color: #EFEFEF;
  margin-top: 4rem;
}

div{
  color: #112233;
  font-size: 2.1em;
  font-weight: 800;

  output {
    color: navy;
    &.negative {
      color: red;
      &::after {
        content: ' negative';
      }
    }
    &::after {
      content: ' positive';
    }
  }
}

#btn_increase {
  background-color: #23AB56;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#btn_decrease {
  background-color: crimson;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<body style="background-color:#F0F0F0">
    <div>TOTAL: <output id="currentValue" role="spinbutton">0</output></div>
    <button id="btn_increase" type="button">+1</button>
    <button id="btn_decrease" type="button">-1</button>
</body>

Display a div in a specific color depending on whether the value is positive or negative, and

Answer №1

Answer №2

Answer №3

Similar questions

Move the container all the way to the left

Creating a separate CSS file for a CSS class that sets the width of a <div

Transferring data between Django and JavaScript: dealing with DateTime information

Unexpected Issues with Page Refresh in AngularJS

Exploring the creation of a WebGL viewer by utilizing Three.js in conjunction with ColladaLoader.js

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Creating a Responsive Design with Bootstrap 4 - Adjustable Height Structure

Determine the viral coefficient based on the sharing platform being used, whether it is Facebook or Twitter

Dealing with errors in AngularJS factory servicesTips for managing errors that occur

Working with MongoDB collections in JavaScript to extract and manipulate array data

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

Creating a column heading that appears at the top of each column break with the help of CSS column-count

The GridCalendar view of FullCalendar v6.1 is generating 50 `ARIA attribute unsupported or prohibited` errors when analyzed with the SiteImprove browser extension

Unable to adjust offset/repeat of texture being utilized as alphaMap

Issues with Angular Component not detecting changes in @Input array

Using Sencha Touch for asynchronous HTTP request to Model-View-Controller

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

What is the best way to fill an array within an object using React Hooks?

Uncovering the Power of Shadow DOM within HTML

Cross-browser compatible (Chrome, Internet Explorer, Firefox)