Only first two if and else if statements are working, others are not. What can I do?

Question

I want to make a battery. It only turns divs into red and orange, but when it should turn green it doesn't work. I think that only the first two if( if (x.value <= 30)) and else if(else if (30 < x.value <= 50)) statements are working, others are just not. When I switch, and I put other else if statements I the first else if statement's place, it works. What can I do to solve this problem?

function changeColor() {
  var a = document.getElementsByClassName("battery");
  var x = document.getElementById("range");

  if (x.value <= 30) {
    a[3].style.backgroundColor = "#ff0000";
    a[2].style.backgroundColor = "";
    a[1].style.backgroundColor = "";
    a[0].style.backgroundColor = "";
  } else if (30 < x.value <= 50) {
    a[3].style.backgroundColor = "#ff6600";
    a[2].style.backgroundColor = "#ff6600";
    a[1].style.backgroundColor = "";
    a[0].style.backgroundColor = "";
  } else if (50 < x.value <= 80) {
    a[3].style.backgroundColor = "#00cc00";
    a[2].style.backgroundColor = "#00cc00";
    a[1].style.backgroundColor = "#00cc00";
    a[0].style.backgroundColor = "";
  } else if (x.value === 0) {
    a.style.backgroundColor = "";
  } else {
    a[3].style.backgroundColor = "#009900";
    a[2].style.backgroundColor = "#009900";
    a[1].style.backgroundColor = "#009900";
    a[0].style.backgroundColor = "#009900";
  }
}

var slider = document.getElementById("range");
var y = document.getElementById("out");
y.innerHTML = slider.value;

slider.oninput = function() {
  y.innerHTML = this.value + "%";
}

.battery {
  width: 50px;
  height: 20px;
  margin-bottom: 2px;
  margin-top: 2px;
  margin-left: 3px;
  margin-right: 3px;
}

#out {
  width: 130px;
  height: 20px;
  text-align: center;
  margin-top: 15px;
}

.allbattery {
  border: 2px solid black;
  width: fit-content;
}

<div class="main">
  <div class="allbattery">
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
  </div>
  <div id="out"></div>
  <input type="range" name="" id="range" onchange="changeColor()" value="0">
</div>

`30 < x.value <= 50` does not do what you think it does. Use `30 < x.value && x.value <= 50` instead. — evolutionxbox, Jan 05 '21 at 12:10
The check with x.value === 0 is redundant, the very first if already covers that case. — timotgl, Jan 05 '21 at 12:13
Does this answer your question? [How to use OR condition in a JavaScript IF statement?](https://stackoverflow.com/questions/2363840/how-to-use-or-condition-in-a-javascript-if-statement) — Federico Baù, Jan 05 '21 at 12:43

Md Sabbir Alam · Answer 1 · 2021-01-05T12:25:21.773

The comparison is wrong. You need to write 30 < x.value && x.value <= 50 instead of 30 < x.value <= 50

When you write 30 < x.value <= 50 it evaluates the following way,

First it will evaluate if 30<x.value. Lets say that value is saved in a variable res. res = 30 <x.value.

Now it will check if res <= 50. Here everything will be true. The value in res doesn't matter. As res can only be true or false. It will evaluate to 1 and 0 when comparing with 50 and it will always be true. Hence it seems the first 2 if-else block is working.

function changeColor() {
    var a = document.getElementsByClassName("battery");
    var x = document.getElementById("range");

    if (x.value <= 30) {
        a[3].style.backgroundColor = "#ff0000";
        a[2].style.backgroundColor = "";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 30 && x.value <= 50) {
        a[3].style.backgroundColor = "#ff6600";
        a[2].style.backgroundColor = "#ff6600";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 50 && x.value <= 80) {
        a[3].style.backgroundColor = "#00cc00";
        a[2].style.backgroundColor = "#00cc00";
        a[1].style.backgroundColor = "#00cc00";
        a[0].style.backgroundColor = "";
    } else if (x.value === 0) {
        a.style.backgroundColor = "";
    } else {
        a[3].style.backgroundColor = "#009900";
        a[2].style.backgroundColor = "#009900";
        a[1].style.backgroundColor = "#009900";
        a[0].style.backgroundColor = "#009900";
    }
}

var slider = document.getElementById("range");
var y = document.getElementById("out");
y.innerHTML = slider.value;

slider.oninput = function () {
    y.innerHTML = this.value + "%";
}

.battery{
    width: 50px;
    height: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
}
#out{
    width: 130px;
    height: 20px;
    text-align: center; 
    margin-top: 15px;
}
.allbattery{
    border: 2px solid black;
    width: fit-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/davaleba2.css">
</head>
<body>
    <div class="main">
    <div class="allbattery">

    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
 
    </div>

    <div id="out"></div>

    <input type="range" name="" id="range"  onchange="changeColor()" value="0" >
    
   
    </div>

    <script src="js/davaleba2.js"></script>
</body>
</html>

score 0 · Answer 2 · answered Jan 05 '21 at 12:13

That's bit funny. JS is not math-based format language. Look at the correct format within if, else if.

There is no such a<x<b syntax. You should use && and || in these cases. So for example, a<x<b is basically x>a && x<b And x<9 or x>20 is x<9 || x>20

function changeColor() {
    var a = document.getElementsByClassName("battery");
    var x = document.getElementById("range");

    if (x.value <= 30) {
        a[3].style.backgroundColor = "#ff0000";
        a[2].style.backgroundColor = "";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 30 && x.value <= 50) {
        a[3].style.backgroundColor = "#ff6600";
        a[2].style.backgroundColor = "#ff6600";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 50 && x.value <= 80) {
        a[3].style.backgroundColor = "#00cc00";
        a[2].style.backgroundColor = "#00cc00";
        a[1].style.backgroundColor = "#00cc00";
        a[0].style.backgroundColor = "";
    } else if (x.value === 0) {
        a.style.backgroundColor = "";
    } else {
        a[3].style.backgroundColor = "#009900";
        a[2].style.backgroundColor = "#009900";
        a[1].style.backgroundColor = "#009900";
        a[0].style.backgroundColor = "#009900";
    }
}

var slider = document.getElementById("range");
var y = document.getElementById("out");
y.innerHTML = slider.value;

slider.oninput = function () {
    y.innerHTML = this.value + "%";
}

.battery{
    width: 50px;
    height: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
}
#out{
    width: 130px;
    height: 20px;
    text-align: center; 
    margin-top: 15px;
}
.allbattery{
    border: 2px solid black;
    width: fit-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/davaleba2.css">
</head>
<body>
    <div class="main">
    <div class="allbattery">

    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
 
    </div>

    <div id="out"></div>

    <input type="range" name="" id="range"  onchange="changeColor()" value="0" >
    
   
    </div>

    <script src="js/davaleba2.js"></script>
</body>
</html>

score 0 · Answer 3 · answered Jan 05 '21 at 12:15

Replace condition else if (30 < x.value <= 50) to else if (x.value > 30 && x.value <= 50) and so on in javascript there is no any syntax like (30 < x.value <= 50)

Check below code

function changeColor() {
    var a = document.getElementsByClassName("battery");
    var x = document.getElementById("range");

    if (x.value <= 30) {
        a[3].style.backgroundColor = "#ff0000";
        a[2].style.backgroundColor = "";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 30 && x.value <= 50) {
        a[3].style.backgroundColor = "#ff6600";
        a[2].style.backgroundColor = "#ff6600";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value > 50 && x.value <= 80) {
        a[3].style.backgroundColor = "#00cc00";
        a[2].style.backgroundColor = "#00cc00";
        a[1].style.backgroundColor = "#00cc00";
        a[0].style.backgroundColor = "";
    } else if (x.value === 0) {
        a.style.backgroundColor = "";
    } else {
        a[3].style.backgroundColor = "#009900";
        a[2].style.backgroundColor = "#009900";
        a[1].style.backgroundColor = "#009900";
        a[0].style.backgroundColor = "#009900";
    }
}

var slider = document.getElementById("range");
var y = document.getElementById("out");
y.innerHTML = slider.value;

slider.oninput = function () {
    y.innerHTML = this.value + "%";
}

.battery{
    width: 50px;
    height: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
}
#out{
    width: 130px;
    height: 20px;
    text-align: center; 
    margin-top: 15px;
}
.allbattery{
    border: 2px solid black;
    width: fit-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/davaleba2.css">
</head>
<body>
    <div class="main">
    <div class="allbattery">

    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
 
    </div>

    <div id="out"></div>

    <input type="range" name="" id="range"  onchange="changeColor()" value="0" >
    
   
    </div>

    <script src="js/davaleba2.js"></script>
</body>
</html>

Nina Scholz · Answer 4 · 2021-01-05T12:28:12.850

Beside the wrong applications of chained comparisons

a < b < c

where

a < b

returns a boolean value

and the second comparison with smaller converts the value to the same type as the right hand side, in this case to a number, you get either/or

   true < c    -->    1 < c
  false < c    -->    0 < c

The result depends on the value of c.

Beside that, you could take a cascading style of the comparison and start with the smallest value and go to each greater value.

if (x.value === 0) {
    // ...
} else if (x.value <= 30) {
    // ...
} else if (x.value <= 50) {
    // ...
} else if (x.value <= 80) {
    // ...
} else {
    // ...
}

function changeColor() {
    var a = document.getElementsByClassName("battery");
    var x = document.getElementById("range");

    if (x.value === 0) {
        a.style.backgroundColor = "";
    } else if (x.value <= 30) {
        a[3].style.backgroundColor = "#ff0000";
        a[2].style.backgroundColor = "";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value <= 50) {
        a[3].style.backgroundColor = "#ff6600";
        a[2].style.backgroundColor = "#ff6600";
        a[1].style.backgroundColor = "";
        a[0].style.backgroundColor = "";
    } else if (x.value <= 80) {
        a[3].style.backgroundColor = "#00cc00";
        a[2].style.backgroundColor = "#00cc00";
        a[1].style.backgroundColor = "#00cc00";
        a[0].style.backgroundColor = "";
    } else {
        a[3].style.backgroundColor = "#009900";
        a[2].style.backgroundColor = "#009900";
        a[1].style.backgroundColor = "#009900";
        a[0].style.backgroundColor = "#009900";
    }
}

var slider = document.getElementById("range");
var y = document.getElementById("out");
y.innerHTML = slider.value;

slider.oninput = function () {
    y.innerHTML = this.value + "%";
}

.battery{
    width: 50px;
    height: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
}
#out{
    width: 130px;
    height: 20px;
    text-align: center; 
    margin-top: 15px;
}
.allbattery{
    border: 2px solid black;
    width: fit-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/davaleba2.css">
</head>
<body>
    <div class="main">
    <div class="allbattery">

    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
    <div class="battery"></div>
 
    </div>

    <div id="out"></div>

    <input type="range" name="" id="range"  onchange="changeColor()" value="0" >
    
   
    </div>

    <script src="js/davaleba2.js"></script>
</body>
</html>

score 0 · Answer 5 · answered Jan 05 '21 at 14:10

Here's an alternative solution that doesn't use if statements and separates HTML/CSS/JS a bit cleaner. It treats the problems of 1) showing and hiding bars in the battery indicator and 2) choosing the right color separately.

This allows some more flexibility when you adjust the thresholds for each battery bar or if you want to adjust colors. A long series of if conditions is error-prone, so it's better to treat the percentage ranges as "data".

https://codepen.io/timotgl/pen/vYXjWOQ

// Select DOM elements
const battery = document.getElementById('battery');
const bars = document.getElementsByClassName('bar');
const percentageIndicator = document.getElementById('percentage');
const slider = document.getElementById('slider');

// Associate percentage ranges with color names
const colors = [
  [  0,   0, 'empty'],
  [  1,  30, 'low'],
  [ 31,  50, 'medium'],
  [ 51,  80, 'high'],
  [ 81, 100, 'full']
];

const getColor = (percentage) => colors.find(color => {
  const min = color[0];
  const max = color[1];
  return percentage >= min && percentage <= max;
})[2];

// Change handler
const colorBatteryBars = (changeEvent) => {
    const percentage = parseInt(changeEvent.target.value);
    percentageIndicator.innerText = percentage.toString() + "%";
  
    // Show bars within percentage, hide bars outside of percentage
    let minPercentage;
    Array.from(bars).forEach(bar => {
      minPercentage = parseInt(bar.getAttribute('data-min-percentage'));
      bar.style.visibility = percentage >= minPercentage ? 'visible' : 'hidden';
    });
  
    // Set the right color
    battery.dataset.color = getColor(percentage);
};

// Attach change handler
slider.addEventListener('change', colorBatteryBars);

#battery {
    border: 2px solid black;
    width: fit-content;
}

.bar {
    visibility: hidden;
    width: 50px;
    height: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
}

#battery[data-color="empty"] .bar {
  background-color: transparent;
}

#battery[data-color="low"] .bar {
  background-color: red;
}

#battery[data-color="medium"] .bar {
  background-color: #ff6600;
}

#battery[data-color="high"] .bar {
  background-color: #00cc00;
}

#battery[data-color="full"] .bar {
  background-color: #009900;
}

#percentage {
    width: 130px;
    height: 20px;
    text-align: center; 
    margin-top: 15px;
}

<div id="battery" data-color="empty">
  <div class="bar" data-min-percentage="81"></div>
  <div class="bar" data-min-percentage="51"></div>
  <div class="bar" data-min-percentage="31"></div>
  <div class="bar" data-min-percentage="1"></div>
</div>
<div id="percentage">0%</div>
<input type="range" name="slider" id="slider" value="0" />

Only first two if and else if statements are working, others are not. What can I do?

5 Answers5