Javascript not displaying correct image

Question

I have a simple code that shows one image at night and one image during the day. For some reason the day image always shows.

The javascript is a bit split. This part is on the page:

<script>

//waits until document is open

$(window).load(function() {

//if it's night time when you read this it displays a night time photo, if it's day time it's a day time photo... don't know how many people might notice

if (time === "night"){
 $.backstretch("cafenight.jpg");

 //makes the font white with a black outline so you can read it easily on the night photo
  $("#content").css("color","#FFFFFF");
    $("#content").css("text-shadow","1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0     #000");

}

else {
 $.backstretch("cafeday.jpg");

    $("#content").css("text-shadow","1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0      Ωfff");}});

 $(document).ready(function(){

 //fades in the first line of text

$("#partFive").fadeIn(2000)

setTimeout(function () {

//fades in the second line of text

$("#partFive").fadeOut(2000)

setTimeout(function () {


$("#partSix").fadeIn(3000)

setTimeout(function () {


$("#partSix").fadeOut(3000)


setTimeout(function () {

window.location.href = "6.html";

    }, 4000);

    }, 2000);

    }, 2000);

    }, 3000);

});

</script>

This part is in basic2.js

// Javascript and Jquery rock!
//Variables to be used throughout
//The user's current hour

var hour = (new Date()).getHours()

//use the variable 'time' to know if it is day or night. Can use to change background even wording.
//The variable 'time' will either be Day or Night depending on what time it is

var time = []

if (hour < 20){
 time.push("day");

}
else {
time.push("night");

}


//Gets the user's city based on IP and replaces #homeCity span with the name of their city
// not perfectly accurate but fun


$.getJSON("http://www.telize.com/geoip?callback=?",
    function(json) {

        $("#homeCity").html(json.city);

    }
    );


//The user's username, they enter it near the beginning

var userName = []

what is the value of time when u hit the if statement in the first file? — Beakie
– Beakie, Commented Jul 18, 2014 at 14:22
time is an array which might contain a string "night". if (time === "night") will always return false since time is not a string. — John_C
– John_C, Commented Jul 18, 2014 at 14:24
Hi John, I think you might be right. How do I set it correctly? Still new to javascript, this is all part of the teething process for me. — Kole McRae
– Kole McRae, Commented Jul 18, 2014 at 14:26
Where in the page is basic2.js loaded? Before or after the <script> tag code you showed? Moreover, I am just curious on the motivation to use an array for "time" and not just a plain variable. — E. Valencia
– E. Valencia, Commented Jul 18, 2014 at 14:27

Beakie · Accepted Answer · 2014-07-18 14:30:20Z

3

I think you have made a mistake with types. You define time as an array and push into it... but in the other file you refer to it as a string and do a type and value comparison on it. It will never equal "night" on this line so will always go with else and therefore default to the day image.

Edit:

var isDay = (hour < 20);

if (isDay) {
//do day stuff
}else{
//do night stuff
}

edited Jul 18, 2014 at 14:30

answered Jul 18, 2014 at 14:24

Beakie

2,0093 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kole McRae Over a year ago

That sounds about right, still new to javascript. What would be the best solution to do what I would like?

Beakie Over a year ago

Get rid of the array. Use a boolean variable instead.

user3508122 · Accepted Answer · 2014-07-18 14:27:47Z

0

It looks like your time variable is an array

var time = []

if (hour < 20){
 time.push("day");

}

else {
time.push("night");

}

Yet in your if statement it's being treated like a string

if (time === "night"){
    $.backstretch("cafenight.jpg");

    //makes the font white with a black outline so you can read it easily on the night photo
    $("#content").css("color","#FFFFFF");
    $("#content").css("text-shadow","1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0     #000");



}

Changing the if statement should do the trick

if (time[0] === "night") {
    ...
}

Edit: Otherwise, use a boolean as suggested in the other comment

var day;

if (hour < 20){
 day = true;

}

else {
    day = false

}

then

if (!day){
    $.backstretch("cafenight.jpg");

    //makes the font white with a black outline so you can read it easily on the night photo
    $("#content").css("color","#FFFFFF");
    $("#content").css("text-shadow","1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0     #000");
}

answered Jul 18, 2014 at 14:27

user3508122

6743 silver badges10 bronze badges

2 Comments

Kole McRae Over a year ago

Will do as you say and give it a test. Thanks SO much.

Kole McRae Over a year ago

Just made the if statement grab the array as suggested and it worked! yay!

Collectives™ on Stack Overflow

Javascript not displaying correct image

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related