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

Time：04-10

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 >

    <div >

      <section >
        <div  id="9" data-value="9">9:00am</div>
        <textarea  style="resize: none;"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="10" data-value="10">10:00am</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="11" data-value="11">11:00am</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="12" data-value="12">12:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="13" data-value="13">1:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="14" data-value="14">2:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="15" data-value="15">3:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="16" data-value="16">4:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="17" data-value="17">5:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

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

CodePudding user response：

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

CodePudding user response：

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

<div  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 >

    <div >

      <section >
        <div  id="9" data-value="9">9:00am</div>
        <textarea  style="resize: none;"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="10" data-value="10">10:00am</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="11" data-value="11">11:00am</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="12" data-value="12">12:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="13" data-value="13">1:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="14" data-value="14">2:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="15" data-value="15">3:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="16" data-value="16">4:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="17" data-value="17">5:00pm</div>
        <textarea ></textarea>
        <button type="button" >Save</button>
      </section>

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

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

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

Page link：https//www.codepudding.com/net/366872.html

Prev:Envoy Filter is only getting applied on calls to External Load Balancer but not on Traffic to inboun
Next:How to I get scripts to run?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding