CODEWITHSUNDEEP
javascripthtmljquerycss
SKANDORI
SKANDORI

Reputation: 37

Change Style CSS using variable value Javascript

I create a countdown and i'm trying to changing CSS style using variable "hours" value i made some conditions for that in my javascript code but doesn't work, I think there is some syntax issues , but no warning or problem in javascript console any help please to execute these conditions ! Thanks

function countdown(dateEnd) {
  var timer, days, hours, minutes, seconds;

  dateEnd = new Date(dateEnd);
  dateEnd = dateEnd.getTime();

  if ( isNaN(dateEnd) ) {
    return;
  }

  timer = setInterval(calculate, 1000);

  function calculate() {
    var dateStart = new Date();
    var dateStart = new Date(dateStart.getUTCFullYear(),
                             dateStart.getUTCMonth(),
                             dateStart.getUTCDate(),
                             dateStart.getUTCHours(),
                             dateStart.getUTCMinutes(),
                             dateStart.getUTCSeconds());
    var timeRemaining = parseInt((dateEnd - dateStart.getTime()) / 1000)

    if ( timeRemaining >= 0 ) {
      days    = parseInt(timeRemaining / 86400);
      timeRemaining   = (timeRemaining % 86400);
      hours   = parseInt(timeRemaining / 3600);
      timeRemaining   = (timeRemaining % 3600);
      minutes = parseInt(timeRemaining / 60);
      timeRemaining   = (timeRemaining % 60);
      seconds = parseInt(timeRemaining);
      document.getElementById("countdown").innerHTML =  hours + "h " + minutes + "m " + seconds + "s ";


      
    }
     else {
      return;
    }
    
    if (hours >= 22 ) {
    document.getElementById("prog").style.width = "93%";
}
   else if (22<=hours >= 17  ) {
      document.getElementById("prog").style.width = "87%";
  }  
  else if (17<= hours >= 12 ) {
      document.getElementById("prog").style.width = "63%";
  }  
  else if (12<= hours >= 8 ) {
      document.getElementById("prog").style.width = "47%";
  } 
  else if (8<= hours >= 6 ) {
      document.getElementById("prog").style.width = "37%";
  }   
  else if (6<= hours >= 3 ) {
      document.getElementById("prog").style.width = "33%";
  }  



  }

  function display(days, hours, minutes, seconds) {}
}



countdown('01/19/2038 03:14:07 AM');
  .gauge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    transition: height .3s ease;
}

.progress {
    height: 48px;
    position: relative;
    line-height: 48px;
    vertical-align: middle;
    background-color: rgba(0,0,0,.25);
    transition: background .6s ease;
}
.progress .progress__labels {
    color: #fff;
}
.progress__labels--spaced {
    justify-content: space-between;
}
.progress__labels {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.progress__labels * {
    line-height: 1;
    vertical-align: middle;
}
.progress__labels--spaced .progress__label--right {
    margin-left: auto;
}
.progress__determinate {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width .2s linear;
}
.bg--warning {
    background-image: #EB0F9B;
}
.bg--warning {
    background-color: #EB0F9B!important;
}
.gauge__countdown, .gauge__percentage {
    font-size: 1.5rem;
}
.carousel--desktop, .hidden {
    display: none!important;
}

*, :after, :before {
    box-sizing: border-box;
}
@media (min-width: 992px){

.progress {
    height: 72px;
    line-height: 72px;
}
.gauge__countdown, .gauge__percentage {
    font-size: 3.5rem;
}
.gauge__countdown, .gauge__percentage {
    font-size: 3.5rem;
}
}

@media (min-width: 768px){  
.m-visible-inline {
    display: inline!important;
}

.title2, h2 {
    font-size: 1.5rem;
}
.gauge__percentage {
    margin: 0 6px;
}



.m-visible-inline {
    display: inline!important;
}

.gauge__percentage {
    margin: 0 6px;
}
}
<div class="gauge"><div class="progress-container progress-container--medium"><div class="progress progress--normal">
  <div id="prog" class="progress__determinate bg--warning" style="width: 23%;" ></div><div class="progress__labels progress__labels--spaced"><span class="progress__label progress__label--left"><span><span class="title2 hidden m-visible-inline">Plus que</span><span class="gauge__percentage">31%</span><span class="title2 hidden m-visible-inline">Le stock est pillé!</span></span></span><span class="progress__label progress__label--right"><span id="countdown" class="countdown gauge__countdown"> </span></span></div></div></div></div>

Upvotes: 0

Views: 59

Answers (2)

Etsh
Etsh

Reputation: 166

Your "if" conditions output are not evaluated as you expect. Consider this code:

let y = 2;
//Truthy
if(3>y){
  console.log("Condition 1 is true");
}
//Truthy
if(y>1){
  console.log("Condition 2 is true");
}
//Falsey
if(3> y >1){
  console.log("Condition 3 is true");
}

You would assume that all conditions are true when in reality the third condition is false, even though it is correct that 3 is greater than y (which equals 2) and, y and 3 are greater than 1, but that is not what JavaScript sees. JavaScript compiled the first expression, which is 3>y, as true and then replace that expression with true and now the condition becomes true > 1 which is falsey, and that's exactly your case. To avoid this, use logical operators &&. I hope you got it

Upvotes: 0

imvain2
imvain2

Reputation: 15857

Your if statements are wrong.

The best way to write the if statement is:

if (hours < 8 && hours >= 6 ) {

Also, when creating if statements that are in a range, you should make sure that each if statement doesn't conflict with another one. For example, you have one that mentions <=6 but another that mentions >=6, that will cause weird issues as the FIRST one will be true so the following one won't get called.

function countdown(dateEnd) {
  var timer, days, hours, minutes, seconds;

  dateEnd = new Date(dateEnd);
  dateEnd = dateEnd.getTime();

  if ( isNaN(dateEnd) ) {
    return;
  }

  timer = setInterval(calculate, 1000);

  function calculate() {
    var dateStart = new Date();
    var dateStart = new Date(dateStart.getUTCFullYear(),
                             dateStart.getUTCMonth(),
                             dateStart.getUTCDate(),
                             dateStart.getUTCHours(),
                             dateStart.getUTCMinutes(),
                             dateStart.getUTCSeconds());
    var timeRemaining = parseInt((dateEnd - dateStart.getTime()) / 1000)

    if ( timeRemaining >= 0 ) {
      days    = parseInt(timeRemaining / 86400);
      timeRemaining   = (timeRemaining % 86400);
      hours   = parseInt(timeRemaining / 3600);
      timeRemaining   = (timeRemaining % 3600);
      minutes = parseInt(timeRemaining / 60);
      timeRemaining   = (timeRemaining % 60);
      seconds = parseInt(timeRemaining);
      document.getElementById("countdown").innerHTML =  hours + "h " + minutes + "m " + seconds + "s ";


      
    }
     else {
      return;
    }
    
    if (hours >= 22 ) {
    document.getElementById("prog").style.width = "93%";
}
   else if (hours < 22 && hours >= 17 ) {
      document.getElementById("prog").style.width = "87%";
  }  
  else if (hours < 17 && hours >= 12 ) {
      document.getElementById("prog").style.width = "63%";
  }  
  else if (hours < 12 && hours >= 8 ) {
      document.getElementById("prog").style.width = "47%";
  } 
  else if (hours < 8 && hours >= 6 ) {
      document.getElementById("prog").style.width = "37%";
  }   
  else if (hours < 6 && hours >= 3 ) {
      document.getElementById("prog").style.width = "33%";
  }  



  }

  function display(days, hours, minutes, seconds) {}
}



countdown('06/29/2020 03:14:07 PM');
.gauge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    transition: height .3s ease;
}

.progress {
    height: 48px;
    position: relative;
    line-height: 48px;
    vertical-align: middle;
    background-color: rgba(0,0,0,.25);
    transition: background .6s ease;
}
.progress .progress__labels {
    color: #fff;
}
.progress__labels--spaced {
    justify-content: space-between;
}
.progress__labels {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.progress__labels * {
    line-height: 1;
    vertical-align: middle;
}
.progress__labels--spaced .progress__label--right {
    margin-left: auto;
}
.progress__determinate {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width .2s linear;
}
.bg--warning {
    background-image: #EB0F9B;
}
.bg--warning {
    background-color: #EB0F9B!important;
}
.gauge__countdown, .gauge__percentage {
    font-size: 1.5rem;
}
.carousel--desktop, .hidden {
    display: none!important;
}

*, :after, :before {
    box-sizing: border-box;
}
@media (min-width: 992px){

.progress {
    height: 72px;
    line-height: 72px;
}
.gauge__countdown, .gauge__percentage {
    font-size: 3.5rem;
}
.gauge__countdown, .gauge__percentage {
    font-size: 3.5rem;
}
}

@media (min-width: 768px){  
.m-visible-inline {
    display: inline!important;
}

.title2, h2 {
    font-size: 1.5rem;
}
.gauge__percentage {
    margin: 0 6px;
}



.m-visible-inline {
    display: inline!important;
}

.gauge__percentage {
    margin: 0 6px;
}
}
<div class="gauge"><div class="progress-container progress-container--medium"><div class="progress progress--normal">
  <div id="prog" class="progress__determinate bg--warning" ></div><div class="progress__labels progress__labels--spaced"><span class="progress__label progress__label--left"><span><span class="title2 hidden m-visible-inline">Plus que</span><span class="gauge__percentage">31%</span><span class="title2 hidden m-visible-inline">Le stock est pillé!</span></span></span><span class="progress__label progress__label--right"><span id="countdown" class="countdown gauge__countdown"> </span></span></div></div></div></div>

Upvotes: 2

Related Questions