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 Brooks Johnson
Brooks Johnson
14,041 Points

Project 3 Interactive Form

Hi Friends,

Hoping for some tips here about using inner HTML, text() and so forth. I am working on project 3 for the Full Stack JS tech degree. One of the requirements is to append a field to the activities section that will display the conference cost. So far, so good. But when I try to set the inner text value the entire section gets overwritten and disappears.

Here is the relevant function. 

function createAmountField(){
        //append a total amount field if activities are selected
        if (amountFieldActive){
            return;
        }else {
            amountFieldActive = true;
            const costField = $('.activities').append("<output id='cost'></output>");
            const text = `<p>Total: $${conferenceCost}</p>`
            // Append Text to document
            costField.innerHTML(text);
        }
    }

And here is the relevant HTML

 <fieldset class="activities">
            <legend>Register for Activities</legend>
            <label>
                <input type="checkbox" name="all" data-cost="$200"> Main Conference — $200
            </label>
            <label>
                <input type="checkbox" name="js-frameworks" data-day-and-time="Tuesday-T09:00:00-T12:00:00" data-cost="$100">
                JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100
            </label>
            <label>
                <input type="checkbox" name="js-libs" data-day-and-time="Tuesday-T13:00:00-T16:00:00" data-cost="$100">
                JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100
            </label>
            <label>
                <input type="checkbox" name="express" data-day-and-time="Tuesday-T09:00:00-T12:00:00" data-cost="$100">
                Express Workshop — Tuesday 9am-12pm, $100
            </label>
            <label>
                <input type="checkbox" name="node" data-day-and-time="Tuesday-T13:00:00-T16:00:00" data-cost="$100">
                Node.js Workshop — Tuesday 1pm-4pm, $100
            </label>
            <label>
                <input type="checkbox" name="build-tools" data-day-and-time="Wednesday-T09:00:00-T12:00:00" data-cost="$100">
                Build tools Workshop — Wednesday 9am-12pm, $100
            </label>
            <label>
                <input type="checkbox" name="npm" data-day-and-time="Wednesday-T13:00:00-T16:00:00" data-cost="$100">
                npm Workshop — Wednesday 1pm-4pm, $100
            </label>

        </fieldset>

2 Answers

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points

The jQuery "append" returns the object it acted on, not the new element that was added. So "costField" is a reference to the entire fieldset.

Also, "innerHTML" is DOM Element property, not a jQuery method. Perhaps you were thinking of ".html()"?

    $("#cost").html(text);
Brooks Johnson
Brooks Johnson
14,041 Points
Brooks Johnson
Brooks Johnson
14,041 Points

Hi Steven, sorry for the last reply. Thank you for your help. That solved it.