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

Nils Sens
Nils Sens
9,654 Points
Posted by Nils Sens
Nils Sens
9,654 Points

Exercise "set content of a tag" doesn't work.

This code:

let inputValue let input = document.querySelector('input') inputValue = input.value let link = document.querySelector('[id=link]') link.text = inputValue

actually works when run in preview mode. Why isn't it accepted? I want my badge LOL

app.js 
let inputValue
let input = document.querySelector('input')
inputValue = input.value
let link = document.querySelector('[id=link]')
link.text = inputValue
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" value="one">
            <a id="link" href="https://teamtreehouse.com"></a>
        </div>
        <script src="app.js"></script>
    </body>
</html>
Tamas Gonda
Tamas Gonda
7,332 Points

Is there any chance that the problem is you left all the semicolons from the end of the lines in JS? It could be important when you are declaring the variable.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It doesn't cause an error to omit semicolons at the end of lines. But it's definitely good practice to use them!

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You are setting the wrong property.

The challenge asked you to set the text content which would be the "textContent" property instead of the ""text" property. The behavior of setting "text" might not be the same in all browsers.

Also, while none of these affect passing this particular challenge, some general hints:

  • there's an easier way to select by id: just put a "#" in front of the id name ("#link")
  • while it's not strictly necessary, it's good practice to end all statements with a semicolon (";")
  • don't modify code provided by a challenge unless the instructions ask you to explicitly
Nils Sens
Nils Sens
9,654 Points
Nils Sens
Nils Sens
9,654 Points

I already fixed that, but great catch! Thank you!!

Nils Sens
Nils Sens
9,654 Points
Nils Sens
Nils Sens
9,654 Points

Oh yeah I know, the semicolons. I've seen a compelling blog post about them where someone argued that the browser runs the code line by line, except in those one or two cases, where the ; s are really needed. It's similar to the {}s around the body of a conditional that runs only one line of code. Since I dropped unnecessary semicolons my fingers ache less LOL

You sometimes hear that minifying will break semicolon-less code, but code that runs should not be broken by a minifyer. And so far I haven'T had probelms. What doesn't work though is when you don't have a ; at the end of your code and you concatenate multiple sources into one file. Then it can break.

http://www.minifier.org/ for example creates line-by-line code, and you could argue that it's 'less minified'. That is a downside I'd acknowledge. Oh wait, I just checked, it outputs the same minified code when I include ;s...... hm...