why is this javascript not working

Question

I'm trying to build a function for adding bread crumbs to my site's navigation. However, right now I have two problems. 1) For some reason the crumb array only holds 2 crumbs at a time, and 2), even though the html elements are stored in the crumbs array, only the new crumb's HTML is rendered. The other crumb renders as:

[object HTMLLIElement]

// script

function add_crumb(name) {

    // get current bread crumbs
    var crumbs = $('#breadcrumbs ul li').toArray();

    // no current bread crumbs, so we don't need an arrow image
    if (crumbs.length == 0) {

        var new_crumb = "<li class='crumb' style='display:inline'> " + name + " </li>";

    } else {

        var new_crumb = "<li class='crumb' style='display:inline'><img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'> " + name + "</li>";

    }

    // add new bread crumb to array
    crumbs.push(new_crumb);

    // render
    $('#breadcrumbs').html('<ul>' + crumbs.join('') + '</ul>');


}

Anyways, I've side stepped the second problem by creating a new blank array and calling .innerHTML on each element (even though I don't understand why I have to do this since jQuery's site says the elements are stored like so:

[<li id="foo">, <li id="bar">]

But if someone could please help me figure out why it's only storing two bread crumbs at a time, I would really, really appreciate it.

Thanks

user400654 · Accepted Answer · 2012-05-30 14:14:38Z

4

HTML Element Objects are not strings, you cannot simply concat them to a string using .join. Try appending them.

$('#breadcrumbs').html('<ul />').find("ul").append(crumbs);

answered May 30, 2012 at 14:14

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

Comments

Paul · Accepted Answer · 2012-05-30 14:15:49Z

2

$('#breadcrumbs ul li').toArray(); gives you an array of HTMLLIElements.

You should take a different approach altogether. No need for any arrays:

if($('#breadcrumbs ul li').length){
    $('#breadcrumbs ul').append(
      "<li class='crumb' style='display:inline'>"
        + name +
      "</li>");
}else{
    $('#breadcrumbs ul').append(
      "<li class='crumb' style='display:inline'>"
        + "<img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'>" +
        + name + 
      "</li>");
}

answered May 30, 2012 at 14:15

Paul

142k28 gold badges285 silver badges272 bronze badges

Collectives™ on Stack Overflow

why is this javascript not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related