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

I feel like a lost little bird again:(

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.

Zack Lee
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

have you logged your inputClass variables to confirm they are selecting the proper element? I would use something cleaner like "document.getElementById('classA')"

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Polly want some code hints? :laughing:

  • putting quotes around t.target.id makes it a string instead of a reference to the id value
  • "ul20" is a single element and cannot be subscripted (did you mean "ul20.children" ?)
  • nothing named "clssA" was defined
  • if you meant "classA", that's a numeric value not an element that can be appended

Perhaps you meant something like this:

        window.clssA = document.createElement("span");  // create a new element
        clssA.textContent = classA;
        ul20.children[0].appendChild(clssA);
        break;
      case "clear20":
        clssA.remove();  // remove the new element
steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

Steve the man. yes! yes i would like some code hints. thanks man .