mercredi 11 mars 2020

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

Aucun commentaire:

Enregistrer un commentaire