Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Introduction to jQuery DOM Manipulation Adding Content to the Page

Trouble using Template Literal code

My code works find when using the teachers syntax, however I find it much easier to read Template Literal style, but can't get the code to work when using it. Can anyone let me know where I am going wrong?

// Assemble HTML of our new Element with the above variables    
    const $newPet = $(`
    <section class="six columns">
      <div class="card"><p><strong>Name:</strong> ${ name } </p>
        <p><strong>Species:</strong> ${ species } </p> 
        <p><strong>Notes:</strong> ${ notes } </p>
        <span class="close">&times;</span>
      </div>
    </section>
  `);

5 Answers

andren
andren
28,520 Points

The main difference I can see compared to the video is that the variables are names are prefixed with an $ which your names are not. And that the .val() method is used.

If you correct the names and use that method like this:

const $newPet = $(`
    <section class="six columns">
      <div class="card"><p><strong>Name:</strong> ${ $name.val() } </p>
        <p><strong>Species:</strong> ${ $species.val() } </p> 
        <p><strong>Notes:</strong> ${ $notes.val() } </p>
        <span class="close">&times;</span>
      </div>
    </section>
`);

Then your code should work, assuming the rest of the code matches what was shown in the video.

Many Thanks @andren. Your solution worked! But the .val() is unnecessary since we already grabbed the value when declaring the variable in the first step of this exercise. Thanks again!

andren
andren
28,520 Points

In the actual video you link to the variable assignments look like this:

var $name = $('#pet-name');
var $species = $('#pet-species');
var $notes = $('#pet-notes');

Which means they point to the element itself, not the value of the element. If you used .val() when assigning them then the .val() is indeed unnecessary within the template string. But as I said I assumed all of the other code in your project matched what was shown in the video.

In the video the .val() was chained to the variable, or at least from what I remember I think it was...

Example...

var $name = $('#pet-name').val();

andren
andren
28,520 Points

Then you remember wrongly, the code I posted is pasted directly from the video. Here is a link to the video that your post links to.

If you skip to 3:00 in the video you can see all of the relevant code written out.

You are correct

andren
andren
28,520 Points

I tend to be pretty thorough about checking my answers before I post them. It doesn't feel good to post something that ends up being completely off. Though it has happened at times.

I don't blame you for misremembering though, especially if you tend to write code that deviates a bit from the code shown, which it sound like you are doing. I tend to do the same when following course like this, and remembering what you changed and didn't isn't always the easiest.

No worries andren. I just went over the code and I wasn't completely wrong in my original statement. I was working off the code from the teachers download since I'm using my own external text editor.

The code from the download is posted the way I initially suggested, whereas the code on the video is how you suggested. So we are both correct.

If there's a lesson learned from this, there's often many different ways to write code, and you will still receive the same outcome.

Cheers!

Actually, here's a link to a lesson where the teacher refactors the code. I didn't reach that step at the time of my initial post LOL

https://teamtreehouse.com/library/why-we-traverse-the-dom

andren
andren
28,520 Points

Well that explains that inconsistency. And you are right, there certainly are plenty of different ways to code something that all results in the same thing. That becomes more and more true as you are introduced to more of a language, and more techniques becomes known to you.

And cheers to you to :smile:.