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

Maciej Kućmierowski
Maciej Kućmierowski
8,752 Points

In step 2 it says step 1 is no longer valid, but i didnt change anything. Why is it happening?

let inputValue = document.getElementById('linkName').value; inputValue.addEventListener('click', () => { a.textContent = inputValue.value; });

app.js
let inputValue = document.getElementById('linkName').value;
inputValue.addEventListener('click', () => {
        a.textContent = inputValue.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>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! There are a couple of things going on here, but the one causing the "Task 1 is no longer passing" is a syntax error. You are trying to set the textContent of a variable named a, but that variable is undefined. When a syntax error is introduced your code can no longer be interpreted.

Also note that you are trying to assign an event listener to a value, when we assign event listeners to objects. To be clear, you will not need an event listener at all for this challenge.

In the first step you selected the element with the id of linkName and got the value there and then assigned it to inputValue. In Step 2, you are meant to first select the <a>, which luckily has been given an id for easy selection just like in step 1. You have the right idea with using textContent. Once you've selected the anchor tag, you can then set the textContent property to be equal to the value stored in inputValue.

Hope this helps! :sparkles: