CODEWITHSUNDEEP
jqueryhtml
Justin Merriman
Justin Merriman

Reputation: 3

Display array value into html div

In my novice understanding of jQuery, this code should input the sunset time into the span div. But it does not work. Any tips?

HTML

<div id="sunsetbox">Sunset tonight at<span></span></div>

JQuery

$(function(){
    var month = getMonth()+1;
    var day = getDate();
    var todaysdate = (month+'/'+day+'/');   
    var sunsettimes = [10/1,"7:19",10/2,"7:17",10/3,"7:15"];
    var index = sunsettimes.indexOf(todaysdate);
    var indexsunset = index + 1;
    var displaysunsettime = sunsettimes.slice(indexsunset);
    $("#sunsetbox span").html(displaysunsettime);
});

Upvotes: 0

Views: 127

Answers (4)

Antoine Combes
Antoine Combes

Reputation: 1454

I think this line :

var sunsettimes = [10/1,"7:19",10/2,"7:17",10/3,"7:15"];

is the main problem as the dates you put in are interpreted as operations (for the first one, 10 divided by 1. Changin the line to: 

var sunsettimes = ['10/1',"7:19",'10/2',"7:17",'10/3',"7:15"];

So the dates are used as Strings should do the trick.

Also, as you said you're new to this, I'll allow myself to give you some advice/knowledge. The system you use (a list with both the keys and the values side by side) seems weird as there are already some things taking of this problem perfectly in Javascript. Those things are the Objects.

This is how you would use them: 

$(function() {
  var date = new Date();
  //need to use a date object
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var todaysdate = month + '/' + day;
  var sunsettimes = {
    '10/1': "7:19",
    '10/2': "7:17",
    '10/3': "7:15"
  };
  //need to get the value at index indexsunset
  var displaysunsettime = sunsettimes[todaysdate];

  $("#sunsetbox span").html(displaysunsettime);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sunsetbox">Sunset tonight at <span></span>
</div>

The objects allow you associate a value to a key, and they will return the value associated to a key you pass them.

I hope i was clear enough

Upvotes: 0

Sharjeel Ahmed
Sharjeel Ahmed

Reputation: 2061

Many mistakes in the code, this code should do what you wanted.

$(function(){

    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var todaysdate = month+'/'+day;   
    var sunsettimes = ["10/1","7:19","10/2","7:17","10/3","7:15"];
    var index = sunsettimes.indexOf(todaysdate);
    var indexsunset = index + 1;
    var displaysunsettime = sunsettimes[indexsunset];
    $("#sunsetbox span").html(displaysunsettime);
});

Upvotes: 1

Tim Hettler
Tim Hettler

Reputation: 1256

The dates in sunsettimes need to be Strings. ("10/1", not 10/1) Right now, you are performing a divide operator on 10 & 1, so the value of your index var is getting set to -1 (not found).

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(function() {
  var date = new Date();
  //need to use a date object
  var month = date.getMonth() + 1;
  var day = date.getDate();
  //there is no / after day
  var todaysdate = month + '/' + day;
  var sunsettimes = ['10/1', "7:19", '10/2', "7:17", '10/3', "7:15"];
  var index = sunsettimes.indexOf(todaysdate);
  var indexsunset = index + 1;
  //need to get the value at index indexsunset
  var displaysunsettime = sunsettimes[indexsunset];

  $("#sunsetbox span").html(displaysunsettime);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sunsetbox">Sunset tonight at <span></span>
</div>

Upvotes: 1

Related Questions