CODEWITHSUNDEEP
javascriptjqueryinnerhtml
Loser Coder
Loser Coder

Reputation: 2428

innerHTML not working properly when used on a jQuery object

This code isn't working as expected. It is not showing any text inside of span.day where it should be showing today's day (Tuesday at the time of writing). It is also not properly adding the class "currentDay" inside of the $.each callback.

 $('#showLess span.day').innerHTML=weekday[today]; 

 $.each($('#showMore p span.day'), function(index, item) {  
      if(typeof item.innerHTML != 'undefined') 
      {     
           alert('item.text:' +item.innerHTML);
           alert('weekday[today]'+item.innerHTML.indexOf(weekday[today])); 

           if(item.innerHTML.indexOf(weekday[today])!=-1) { 
                alert("check which element has added class currentDay:");
                item.addClass('currentDay');
           }else{
                if(item.hasClass('currentDay')) {
                     item.removeClass('currentDay'); 
                }
           }
      } 
 });

.innerHTML is not changing the HTML, additional class is not getting added as expected.

<p id="showLess" class="less">
        <span class="day">**Tuesday**</span>
</p>

Why isn't the day showing?

Why is the show/hide not working?

$('.less').on('click', function(e) {
            $('#showMore').show();
            $('#showLess').hide();
        });

        $('.more').bind('click', function(e) {
            $('#showLess').show();
            $('#showMore').hide();
        });

Upvotes: 1

Views: 797

Answers (3)

Sushanth --
Sushanth --

Reputation: 55750

You are trying to invoke JS properties on jQuery objects.

For example innerHTML

And you are trying to invoke that on a jQuery object.

$('#showLessHours span.day').innerHTML

Should be 

$('#showLessHours span.day')[0].innerHTML

or

$('#showLessHours span.day').html(weekday[today]);

And in your each loop item is a JS object and you are trying to add a class using jQuery. Convert that to jQuery object first .

item.addClass('currentDay');
item.removeClass('currentDay');

should be 

$(item).addClass('currentDay');  or $(this).addClass('currentDay');
$(item).removeClass('currentDay'); or $(this).removeClass('currentDay')

Instead you can use the $(this) as well instead of $(item) object inside the callback as both refer to the same objects.

Another small suggestion is why do you want to mix vanilla JS and jQuery when jQuery is included and you want to use that in your application.

jsFiddle

Upvotes: 5

Jonathan Walters
Jonathan Walters

Reputation: 414

Because .innerHTML isn't a jquery function. You can use .html() to achieve what you are trying to do. Alternatively, if you REALLY want to use .innerHTML, you can use .get() to get the actual DOM element, and then use .innerHTML but... I wouldn't recommend it.

I believe this edited fiddle solves your problem. Relevant code:

$('#showLessHours span.day').html(weekday[today]);
//...
if(item.html() != '') {     
    alert('item.text:' +item.text());
    alert('weekday[today]'+item.text().indexOf(weekday[today]));
    if(item.html().indexOf(weekday[today])!=-1) {
//...

Upvotes: 1

Kevin
Kevin

Reputation: 291

In addition to what Sushanth said, you are also trying to invoke jQuery methods on javascript objects.

item.addClass

should by

$(item).addClass

Upvotes: 0

Related Questions