Display array value into html div

Question

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);
});

Do you create date object anywhere? You can't use methods like getMonth() on their own. — j08691
– j08691, Commented Oct 1, 2014 at 17:02
I didn't know you had to add a date object, but after adding it like @ArunPJohny did, still is not working for me. — Justin Merriman
– Justin Merriman, Commented Oct 1, 2014 at 17:08
Just updated things one more time to make sure, this time it worked! Thanks! — Justin Merriman
– Justin Merriman, Commented Oct 1, 2014 at 17:10

Arun P Johny · Accepted Answer · 2014-10-01 17:02:29Z

1

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>

answered Oct 1, 2014 at 17:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Sharjeel Ahmed · Accepted Answer · 2014-10-01 17:07:30Z

1

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);
});

answered Oct 1, 2014 at 17:07

Sharjeel Ahmed

2,0612 gold badges17 silver badges25 bronze badges

Comments

Tim Hettler · Accepted Answer · 2014-10-01 17:03:28Z

0

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).

answered Oct 1, 2014 at 17:03

Tim Hettler

1,2569 silver badges12 bronze badges

Comments

Antoine Combes · Accepted Answer · 2014-10-01 17:12:48Z

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

Collectives™ on Stack Overflow

Display array value into html div

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related