'Console log showing NaN and color function isn't setting class correctly

Console log is showing NaN for any var I put into it. Also color function is not changing classes correctly likely because of the number issue. Still have to figure out local storage but my main concern is getting the var to show a number like it should and getting the class to change according to the time of day.

var time9 = (parseInt($('#9').children('div').attr('data-value')));
var time10 = (parseInt($('#10').children('div').attr('data-value')));
var time11 = (parseInt($('#11').children('div').attr('data-value')));
var time12 = (parseInt($('#12').children('div').attr('data-value')));
var time13 = (parseInt($('#13').children('div').attr('data-value')));
var time14 = (parseInt($('#14').children('div').attr('data-value')));
var time15 = (parseInt($('#15').children('div').attr('data-value')));
var time16 = (parseInt($('#16').children('div').attr('data-value')));
var time17 = (parseInt($('#17').children('div').attr('data-value')));

// Keeps date on the page
var date = moment().format("dddd, MMMM Do YYYY");
$("#currentDay").html(date);

//var time = $('.row').children('section'); //loop through this
console.log(time10);

// Event listender for saving activities in timeslots to local storage
$('.saveBtn').on('click', function () {

    var activities = $('.acts').val();


    localStorage.setItem(activities, time9);
    localStorage.setItem(activities, time10);
    localStorage.setItem(activities, time11);
    localStorage.setItem(activities, time12);
    localStorage.setItem(activities, time13);
    localStorage.setItem(activities, time14);
    localStorage.setItem(activities, time15);
    localStorage.setItem(activities, time16);
    localStorage.setItem(activities, time17);
});

// Changes color of timeslot container depending on time
function color() {
    var currentTime = moment().hour(); // variable to pull current time from

    // 9am timeslot
    if (time9 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time9 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 10am timeslot
    if (time10 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time10 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 11am timeslot
    if (time11 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time11 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 12pm timeslot
    if (time12 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time12 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 1pm timeslot
    if (time13 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time13 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 2pm timeslot
    if (time14 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time14 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 3pm timeslot
    if (time15 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time15 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 4pm timeslot
    if (time16 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time16 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 5pm timeslot
    if (time17 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time17 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }



};
.timeslots {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border: 1px solid black;
  /*border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;*/
  border-radius: 15px;
  background-color: #06aed5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}

.timeslots {
  display: flex;
  justify-content: center;
  font-size: 24px;
}
<div class="container-fluid">

    <div class="row">

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="9" data-value="9">9:00am</div>
        <textarea class="col-8 border border-info acts" style="resize: none;"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="11" data-value="11">11:00am</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="12" data-value="12">12:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="13" data-value="13">1:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="14" data-value="14">2:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="15" data-value="15">3:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="16" data-value="16">4:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="17" data-value="17">5:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

    </div>
    <!-- Timeblocks go here -->
  </div>
javascripthtmlcsstwitter-bootstrap


Solution 1:[1]

replace .children('div').attr('data-value') with .data('value') and it will works with you

var time9 = (parseInt($('#9').data('value')));
var time10 = (parseInt($('#10').data('value')));
var time11 = (parseInt($('#11').data('value')));
var time12 = (parseInt($('#12').data('value')));
var time13 = (parseInt($('#13').data('value')));
var time14 = (parseInt($('#14').data('value')));
var time15 = (parseInt($('#15').data('value')));
var time16 = (parseInt($('#16').data('value')));
var time17 = (parseInt($('#17').data('value')));

the data attribute exists at the selected element, no child div inside

Solution 2:[2]

You should not be calling $('#10').children('div') since #10 does not have children:

<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>

Instead, to get #10's data-value, call $('#10').attr('data-value'), e.g.:

var time10 = parseInt($('#10').children('div').attr('data-value'));

The same applies to time9 through time17.

As for local storage, I have added code that saves and retrieves the <textarea> values.

var time9 = (parseInt($('#9').attr('data-value')));
var time10 = (parseInt($('#10').attr('data-value')));
var time11 = (parseInt($('#11').attr('data-value')));
var time12 = (parseInt($('#12').attr('data-value')));
var time13 = (parseInt($('#13').attr('data-value')));
var time14 = (parseInt($('#14').attr('data-value')));
var time15 = (parseInt($('#15').attr('data-value')));
var time16 = (parseInt($('#16').attr('data-value')));
var time17 = (parseInt($('#17').attr('data-value')));

// Keeps date on the page
var date = moment().format("dddd, MMMM Do YYYY");
$("#currentDay").html(date);

//var time = $('.row').children('section'); //loop through this
console.log(time10);

// Event listender for saving activities in timeslots to local storage
$('.saveBtn').on('click', function () {

    var activities = $('.acts').val();

    // Save in local storage:
    for (let i = 9; i <= 17; i++) {
        localStorage.setItem(`item${i}`, $(`#${i}`).next('textarea').val())
    }


});

// Changes color of timeslot container depending on time
function color() {
    var currentTime = moment().hour(); // variable to pull current time from

    // 9am timeslot
    if (time9 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time9 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 10am timeslot
    if (time10 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time10 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 11am timeslot
    if (time11 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time11 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 12pm timeslot
    if (time12 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time12 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 1pm timeslot
    if (time13 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time13 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 2pm timeslot
    if (time14 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time14 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 3pm timeslot
    if (time15 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time15 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 4pm timeslot
    if (time16 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time16 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }

    // 5pm timeslot
    if (time17 > currentTime) {
        $('.acts').addClass('future')
    }
    else if (time17 === currentTime) {
        $('.acts').addClass('present')
    }
    else {
        $('.acts').addClass('past')
    }
};

$(document).ready(function () {
    // Retrieve from local storage:
    for (let i = 9; i <= 17; i++) {
        // localStorage.setItem('item' + i, $(`#${i}`).next('textarea').val())
        $(`#${i}`).next('textarea').val(
            localStorage.getItem(`item${i}`)
        )
    }

})
.timeslots {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border: 1px solid black;
  /*border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;*/
  border-radius: 15px;
  background-color: #06aed5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}

.timeslots {
  display: flex;
  justify-content: center;
  font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container-fluid">

    <div class="row">

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="9" data-value="9">9:00am</div>
        <textarea class="col-8 border border-info acts" style="resize: none;"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="11" data-value="11">11:00am</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="12" data-value="12">12:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="13" data-value="13">1:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="14" data-value="14">2:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="15" data-value="15">3:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="16" data-value="16">4:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="17" data-value="17">5:00pm</div>
        <textarea class="col-8 border border-info acts"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

    </div>
    <!-- Timeblocks go here -->
  </div>

You should not be calling $('#10').children('div') since #10 does not have children:

<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>

Instead, to get #10's data-value, call $('#10').attr('data-value'), e.g.:

var time10 = parseInt($('#10').children('div').attr('data-value'));

The same applies to time9 through time17.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions