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 Introduction to jQuery DOM Manipulation Adding Content to the Page

Posted by jlampstack
jlampstack
23,932 Points

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,558 Points
andren
andren
28,558 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.

jlampstack
jlampstack
23,932 Points

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,558 Points
andren
andren
28,558 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.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

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,558 Points
andren
andren
28,558 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.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

You are correct

andren
andren
28,558 Points
andren
andren
28,558 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.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

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!

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

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,558 Points
andren
andren
28,558 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:.