Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Bryant Feld
.a{fill-rule:evenodd;}techdegree
Bryant Feld
Full Stack JavaScript Techdegree Student 26,144 Points

JS DOM Manipulation

I am conducting an experiment to get a better understanding of JS DOM manipulation here is the HTML

<html>
<head>
</head>
<body>
<ul id = "justiceavengers">
<li class="marvel">Captain America</li>
<li class="marvel">Winter Soldier</li>
<li class="marvel">Ant Man</li>
<li class="marvel">Scarlet Witch</li>
<li class="marvel">Vision</li>
<li class="marvel">Hawkeye</li>
<li class="marvel">War Machine</li>
<li class="marvel">Black Panther</li>
<li class="marvel">Black Widow</li>
<li class="marvel">Iron Man</li>
<li class="dc">Superman</li>
<li class="dc">Wonder Woman</li>
<li class="dc">Flash</li>
<li class="dc">Batman</li>
<li class="dc">Aquaman</li>
<li class="dc">Cyborg</li>
<li class="dc">Green Lantern</li>
<li class="dc">Martian Manhunter</li>
<li class="dc">Shazam</li>
</ul>
<button id="heroes">All/Marvel/DC/toggle</button>
</body>
<script type ="text/javascript" src = "heroscript.js"></script>
</html>

here is the JS

var allHeroesRoot = document.getElementById("justiceavengers");
var allHeroes = document.getElementById("justiceavengers").cloneNode(true);
var DCHeroes = allHeroes.getElementsByClassName("dc");
var MarvelHeroes = allHeroes.getElementsByClassName("marvel");
currentCase = "all" 
document.getElementById("heroes").onclick = function()
{
while (justiceavengers.hasChildNodes()) {justiceavengers.removeChild(justiceavengers.childNodes[0]);}
for (x=0; x <= (allHeroes.length-1); x++){allHeroesRoot.appendChild(MarvelHeroes[x]);}
}

when the button is clicked it should remove all heroes then add the marvel heroes, it's not adding the marvel heroes, not sure why...

Alexander Davison
Alexander Davison
65,469 Points

Can you please include Markdown so that your code is readable to others? Thanks! Look right below the answer text box and above the "Post Comment" button and you should a message about Markdown. This will really help me and others!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

See here https://teamtreehouse.com/forum/posting-code-to-the-forum for posting code to the forum.

2 Answers

Damien Watson
Damien Watson
27,419 Points

Hey Bryant,

Played around with it a bit, but should now do what you're after. Agree with Alexander that you should use code markup in the future.

Hope this helps.

HTML

    <h1 id="listType">All Heroes</h1>
    <button id="heroes">All/Marvel/DC/toggle</button>
    <ul id="justiceavengers">
        <li class="marvel">Captain America</li>
        <li class="marvel">Winter Soldier</li>
        <li class="marvel">Ant Man</li>
        <li class="marvel">Scarlet Witch</li>
        <li class="marvel">Vision</li>
        <li class="marvel">Hawkeye</li>
        <li class="marvel">War Machine</li>
        <li class="marvel">Black Panther</li>
        <li class="marvel">Black Widow</li>
        <li class="marvel">Iron Man</li>
        <li class="dc">Superman</li>
        <li class="dc">Wonder Woman</li>
        <li class="dc">Flash</li>
        <li class="dc">Batman</li>
        <li class="dc">Aquaman</li>
        <li class="dc">Cyborg</li>
        <li class="dc">Green Lantern</li>
        <li class="dc">Martian Manhunter</li>
        <li class="dc">Shazam</li>
    </ul>

JS

    var allHeroesRoot = document.getElementById("justiceavengers");
    var allHeroes = document.getElementById("justiceavengers").cloneNode(true);
    var DCHeroes = allHeroes.getElementsByClassName("dc");
    var MarvelHeroes = allHeroes.getElementsByClassName("marvel");
    currentCase = "All";
    document.getElementById("heroes").onclick = function() {
        while (justiceavengers.hasChildNodes()) {
            justiceavengers.removeChild(justiceavengers.childNodes[0]);
        }
        var loopHeroes = null;
        if (currentCase == 'All') {
            currentCase = 'Marvel';
            loopHeroes = MarvelHeroes;
        } else if (currentCase == 'Marvel') {
            currentCase = 'DC';
            loopHeroes = DCHeroes;
        } else if (currentCase == 'DC') {
            currentCase = 'All';
            // Problem was 'allHeroes' contains the parent '<ul>'
            loopHeroes = allHeroes.getElementsByTagName('li');
        }
        document.getElementById('listType').innerText = currentCase + ' Heroes';

        for (x=0; x<loopHeroes.length; x++) {
            allHeroesRoot.appendChild(loopHeroes[x].cloneNode(true));
        }
    }
Bryant Feld
seal-mask
.a{fill-rule:evenodd;}techdegree
Bryant Feld
Full Stack JavaScript Techdegree Student 26,144 Points
Bryant Feld
.a{fill-rule:evenodd;}techdegree
Bryant Feld
Full Stack JavaScript Techdegree Student 26,144 Points

sorry for the unintentionally minified code, and thanks for the help! , great stuff!

Damien Watson
Damien Watson
27,419 Points

Welcome. :)