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 JavaScript and the DOM (Retiring) Making Changes to the DOM Modifying Elements

April Nichols
April Nichols
7,259 Points
Posted by April Nichols
April Nichols
7,259 Points

Task 1 previously correct, but then when attempting task 2, I get "Task 1 is no longer passing" error...?

How/why does this happen? If I got task 1 right, why does adding more code on task 2 return an error saying that Task 1 no longer passes?

app.js 
let inputValue = document.querySelector('#linkName').value;
inputValue = document.querySelector('#link').value;
index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <div id="content">
            <label>Link Name:</label>
            <input type="text" id="linkName">
            <a id="link" href="https://teamtreehouse.com"></a>
        </div>
        <script src="app.js"></script>
    </body>
</html>

3 Answers

Ben Reynolds
Ben Reynolds
35,170 Points
Ben Reynolds
Ben Reynolds
35,170 Points

Task 1 breaks with the new code because in line 2 you've changed the value of inputValue. Instead, you need to take the value you gave it in line 1, and assign it to the link's text property.

A couple hints:

  1. On line 2 put inputValue on the other side of the equals sign
  2. Your selector is right, but you'll need to use a different property than .value at the end
April Nichols
April Nichols
7,259 Points
April Nichols
April Nichols
7,259 Points

Thanks Ben. I had changed it to textContent instead of value after I asked the question but was still coming up short. Why is it not done in the same way as when we assign different values to a previously declared variable?

And I still get a little confused on when to use value vs textContent vs innerHTML. facepalm

Ben Reynolds
Ben Reynolds
35,170 Points
Ben Reynolds
Ben Reynolds
35,170 Points

It depends what type of element you're grabbing content from. Since the first one is an input element like a checkbox, select, or in this case an editable text field then value is used.

The other ones like textContent and innerText can be more confusing to choose since the way they work is pretty similar to each other, this article has some decent info about why there are so many and when you'd use one over the other.