Html - Color div based on Value positive or negative also show text

Ot225vioBarreto
August 12, 2024
166 views
3 votes
3 Answers

I made this counter but I wish to color the id="clicks" based on positive or negative value also append text based on this.

     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>

Can somebody help? id="clicks" color red if negative and color green if positive also show text positive/negative based on this.

Answers

Use 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 clickplus() {
        clicks += 1;
        let color = "black";
        let appendText = "";
        if(clicks<0){
          color = "red";
          appendText = "negative";
        }else if(clicks>0){
          color = "green";
          appendText = "positive";
        }
        document.getElementById("clicks").innerHTML = clicks + " " + appendText;
        document.getElementById("clicks").style.color = color;
 }
  var clicks = 0;
    function clickless() {
        clicks -= 1;
        let color = "black";
        let appendText = "";
        if(clicks<0){
          color = "red";
          appendText = "negative";
        }else if(clicks>0){
          color = "green";
          appendText = "positive";
        }
        document.getElementById("clicks").innerHTML = clicks + " " + appendText;
        document.getElementById("clicks").style.color = color;
 }
    </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>

Here is a modern script using delegation eventListener and proper CSS (center is very deprecated)

Also I swapped the buttons since humans normally see negative values left of 0

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

const clickIt = (e) => {
  let tgt = e.target.closest('button.btn');
  if (!tgt) return; // not one of the buttons
  let increment = tgt.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', clickIt);

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>

Simply create a CSS class such as .negative that contains color: red. Then you can use element.classList.toggle() to add or remove the class depending if the statement is true or false. The text positive and negativecan be added as pseu-element through CSS using::afterandcontent`:

let count = 0;

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

BUTTONS.forEach(button => {
  button.addEventListener('click', function() {
    switch (this.id) {
      case 'btn_plus':
        count++;
        break;
      case 'btn_less':
        count--;
        break;
    }
    clicks.value = count;
    clicks.classList.toggle('negative', (count < 0));
  })
})

body {
  background-color: #FOFOFO;
  margin-top: 3rem;
}

div{
  color: #002244;
  font-size: 2em;
  font-weight: 900;
  output {
    color: green;
    &.negative {
      color: red;
      &::after {
        content: ' negative';
      }
    }
    &::after {
      content: ' positive';
    }
  }
}

#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">
    <div>COUNT: <output id="clicks" role="spinbutton">0</output></div>
    <button id="btn_plus" type="button">+1</button>
    <button id="btn_less" type="button">-1</button>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Color div based on Value positive or negative also show text

Answers