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 steven swensen
steven swensen
7,926 Points

Having a hard time with the parent child selection

HTML

            <div class="all" id="pro20"><!-- Stadium Seating -->
                <h1>Stadium Seating</h1>
                <form>
                    <label for="classA">Class A seats sold:</label>
                    <input type="text" name="classA" id="classA"><br>
                    <label for="classB">Class B seats sold:</label>
                    <input type="text" name="classB" id="classB"><br>
                    <label for="classC">Class C seats sold:</label>
                    <input type="text" name="classC" id="classC"><br>
                    <ul>
                        <li>Class A:</li>
                        <li>Class B:</li>
                        <li>Class C:</li>
                        <li>Total:</li>
                    </ul>
                    <button type="button" id="calc20">Calculate</button>
                    <button type="button" id="clear20">Clear</button>
                </form>
            </div>

JavaScript

const inputClassA = document.querySelector('input[name="classA"]');
const inputClassB = document.querySelector('input[name="classB"]');
const inputClassC = document.querySelector('input[name="classC"]');
const ul20 = document.querySelector('div#pro20 ul');
let classA, classB, classC, Total20;
document.addEventListener('click', t => {
    if(t.target.tagName="BUTTON") switch('t.target.id'){
        case 'calc20' : classA = parseInt(inputClassA.value); classB = parseInt(inputClassB.value); classC = parseInt(inputClassC.value);
        classA *= 15; classB *= 12; classC *= 9; Total20 = classA + classB + classC; ul20[0].appendChild(clssA); break;
        case 'clear20' : inputClassA.value = inputClassB.value = inputClassC.value = "";
    }
});

What I am trying to do is append classA to the first <ul> element and so on when the calc20 button is hit and then clear just the math that was added to the <li> of the <ul> when the clear button is clicked.

2 Answers

Stipe Stipic
Stipe Stipic
17,520 Points
Stipe Stipic
Stipe Stipic
17,520 Points

You have only two things wrong:

  1. in the switch don't use quotes.
  2. you can not use appendChild() to append text to an element.
<script>
const inputClassA = document.querySelector('input[name="classA"]');
const inputClassB = document.querySelector('input[name="classB"]');
const inputClassC = document.querySelector('input[name="classC"]');
const ul20 = document.querySelector('div#pro20 ul');
let classA, classB, classC, Total20;
document.addEventListener('click', t => {
    if(t.target.tagName="BUTTON"){
        /* this was wrong no quotes inside the switch */
        switch(t.target.id){
            case 'calc20' : 
            classA = parseInt(inputClassA.value); 
            classB = parseInt(inputClassB.value); 
            classC = parseInt(inputClassC.value);
            classA *= 15; 
            classB *= 12; 
            classC *= 9; 
            Total20 = classA + classB + classC; 
            //with ul20.children we get an array of 4 li's [li,li,li,li] you can not append text as child
            // we take the content e.g Class A: and add the text classA to it
            ul20.children[0].textContent = ul20.children[0].textContent + " " + classA;
            ul20.children[1].textContent = ul20.children[1].textContent + " " + classB;
            ul20.children[2].textContent = ul20.children[2].textContent + " " + classC;
            ul20.children[3].textContent = ul20.children[3].textContent + " " + Total20;
            break;
            case 'clear20' : inputClassA.value = inputClassB.value = inputClassC.value = "";
        }
    }
});
</script>
steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

Hey thank you so much I spent over an hour on that last night.