CODEWITHSUNDEEP
javascriptif-statementsliderrange
Stanjdev
Stanjdev

Reputation: 5

Javascript if else greater than range slider

I am trying to make this range slider display "Good Morning, afternoon, evening, and night," as well as 4 photos that change when I move the slide from 0:00 to 23:00 military time.

I think my 'if, else' statements have the correct "greater than or equal to" statements, but it's not displaying my "good morning" statement and photo. Also at value 2 on the slider, it displays "Good Evening" for some odd reason.

I would specifically like to achieve this using the if-statements to improve my knowledge. Any ideas? Thank you! 

let photoGallery = new Array();
    photoGallery[0] = "https://img.etimg.com/thumb/msid-66951054,width-643,imgsize-920116,resizemode-4/sunrise.jpg"
    photoGallery[1] = "https://upload.wikimedia.org/wikipedia/commons/0/09/A_good_afternoon_%286933189752%29.jpg"
    photoGallery[2] = "https://cdn.asiatatler.com/asiatatler/i/hk/2018/11/06202142-story-image-14376_cover_2000x1200.jpg"
    photoGallery[3] = "http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg"

let slider = document.querySelector("#myRange");
let output = document.querySelector("#output")
output.innerHTML = slider.value + ":00";

slider.oninput = function() {
  output.innerHTML = this.value + ":00";

  // var time = document.querySelector("#myRange").value;
  var time = $(this).val();
  $('#sliderStatus').html( $(this).val() );
  if (time >= "6" && time < "12") {
    document.querySelector(".greeting").innerHTML = "Good Morning!"
    $("#sliderimg").prop("src", photoGallery[0]);
  }
  else if (time >= "12" && time < "18") {
    document.querySelector(".greeting").innerHTML = "Good Afternoon!"
    $("#sliderimg").prop("src", photoGallery[1]);
  }
  else if (time >= "18" && time < "21") {
    document.querySelector(".greeting").innerHTML = "Good Evening!"
    $("#sliderimg").prop("src", photoGallery[2]);
  }
  else if (time >= "0" && time < "6"){
    document.querySelector(".greeting").innerHTML = "Good Night!"
    $("#sliderimg").prop("src", photoGallery[3]);
  }

My codepen: https://codepen.io/stanimal93/pen/poJaVrz

Upvotes: 0

Views: 119

Answers (2)

Umair Lakhani
Umair Lakhani

Reputation: 211

Your conditions are comparing strings, convert them to integers.

  if (parseInt(time) >= 6 && parseInt(time)< 12) {
    document.querySelector(".greeting").innerHTML = "Good Morning!"
    $("#sliderimg").prop("src", photoGallery[0]);
  }

Upvotes: 3

blex
blex

Reputation: 25634

You're comparing Strings, which won't result in the same output as comparing numbers.

// Convert the String to a Number
var time = parseInt($(this).val(), 10);

You can then remove the quotes in your conditions:

if (time >= 6 && time < 12)

You'll end up with this:

$(document).ready(function() {
  let photoGallery = [
    "https://img.etimg.com/thumb/msid-66951054,width-643,imgsize-920116,resizemode-4/sunrise.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/0/09/A_good_afternoon_%286933189752%29.jpg",
    "https://cdn.asiatatler.com/asiatatler/i/hk/2018/11/06202142-story-image-14376_cover_2000x1200.jpg",
    "http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg"
  ];
  let slider = document.querySelector("#myRange");
  let output = document.querySelector("#output");
  output.innerHTML = slider.value + ":00";

  slider.oninput = function() {
    output.innerHTML = this.value + ":00";

    var time = parseInt($(this).val(), 10); // <------------
    $('#sliderStatus').html($(this).val());
    if (time >= 6 && time < 12) {
      document.querySelector(".greeting").innerHTML = "Good Morning!"
      $("#sliderimg").prop("src", photoGallery[0]);
    } else if (time >= 12 && time < 18) {
      document.querySelector(".greeting").innerHTML = "Good Afternoon!"
      $("#sliderimg").prop("src", photoGallery[1]);
    } else if (time >= 18 && time < 21) {
      document.querySelector(".greeting").innerHTML = "Good Evening!"
      $("#sliderimg").prop("src", photoGallery[2]);
    } else if (time >= 0 && time < 6) {
      document.querySelector(".greeting").innerHTML = "Good Night!"
      $("#sliderimg").prop("src", photoGallery[3]);
    }
  };
});

Upvotes: 0

Related Questions