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
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsNeed help with append
I'm having an issue where I'm trying to append a price on the Unit 3 project. Now that I have my checkboxes working with them either adding or subtracting a price, I want to append that price to the DOM. startingPrice starts at 0 of course but as it goes up in price such ass $200, instead of overwriting the 0 to 200, it will write 0200300 and so on. I've tried a couple things and I cant get it to work right. I feel like as soon as I get help and one thing works, the next thing breaks and Im having a hard time figuring it out :(
$(activities).append(0);
$(activities).change(e => {
let inputs = $(e.target)
.parent()
.text();
const indexOfDollarSign = inputs.indexOf("$");
let price = parseFloat(inputs.slice(indexOfDollarSign + 1));
if (e.target.checked === true) {
startingCost = startingCost + price;
} else if (e.target.checked === false) {
startingCost = startingCost - price;
}
/*A new price keeps appending itself from the current price.
ex: if the starting price is at 0, the new price if its 200 and then 300 will be..
0200300 so on.
*/
});
github JS file: https://github.com/joeEscob1023/interactiveForm/blob/master/js/app.js
2 Answers
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsInstead at the top having $(activities).append(0) I changed that to
activities.append('<span id="total">0</span>');
and at the bottom of the function, instead of using
$(activities).append(startingCost);
changed it to:
$('#total').text(startingCost)
Steven Parker
229,744 PointsThe code shown here does not include where "startingCost" is originally assigned. But if it is stored as a string, a "+" operator will be taken as concatenation instead of numeric addition. That would explain the additional digits.
To resolve this, convert the value from a string to a number so you can perform addition instead of concatenation.
Update: I took a peek at the Github code, but it doesn't exhibit this behavior. Maybe you have made changes not yet committed?
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 Points$(activities).append(startingCost);
This is the code I was doing at the end of the change function. Using this makes the numbers go 0200300 and so forth. I looked in the console and the value of startingCost is a number. The append at the bottom is making a new number get appended every time and I just have to find a way to overwrite it with each change to the checkbox
Steven Parker
229,744 PointsOh, so this isn't happening in the script code, it's happening in the HTML. Each call to "append" adds another text child node, which will appear alongside any previous ones. What you want to do is replace the previous value, so you need a way to select it.
I'd suggest that instead of creating a text node to start with, create an element with an ID that is easily addressable, then update it as needed:
$(activities).append("<span id=cost>0</span>"); // create an addressable element
// ...
$("#cost").text(startingCost); // then update on changes
Another idea I had was to keep it a text node, but just make it updatable:
var textNode = document.createTextNode("0"); // create a text node, but with a reference
$(activities).append(textNode); // append the node
//...
textNode.textContent = startingCost; // update using the reference
Steven Parker
229,744 PointsSteven Parker
229,744 PointsThe best help is .. self-help?  
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsJoseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 PointsAm I going to need to add an if statement as well to make sure the user can try and click two different events around the same time period? Like for example, if they want to go to an event at 1-4pm, make sure they cant check any other event around the same time period? Can I make a while new event for that or does it have to be in the same change function?
Steven Parker
229,744 PointsSteven Parker
229,744 PointsThere's a few ways to handle that. One would be to just automatically un-check any control for the same (or overlaping) time period when one is checked. Another would be to disable any conflicting ones, and re-enable them when the selected one is un-checked. Either way, it makes sense to do it in the same handler.