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

Posted by Jason Sandoval
Jason Sandoval
5,009 Points

Broken Exercise?

This exercise is asking me to set both parts of the value to variable inputValue but doing so will result in the first portion of the exercise to break.

app.js 
let inputValue = document.querySelector("linkName").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

Carrie Short
Carrie Short
3,529 Points
Carrie Short
Carrie Short
3,529 Points

This is a syntax error. When using querySelector you use css formatting to refer to an element.

let inputValue = document.querySelector("#linkName").value;

or you could use getElementById

let inputValue = document.getElementById("linkName").value;
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You haven't selected an element.

There's no element with a tag named "linkName", so the querySelector returns null. And trying to get the value attribute of null will always fail.

You have many options for how to get a reference to the proper element, here's a few (I recommend the first one):

  • document.getElementById("linkName")
  • document.querySelector("#linkName")
  • document.querySelector("input")
  • document.querySelector("[type=text]")
  • document.querySelector("#content > :nth-child(2)")
  • document.querySelectorAll("input")[0]
  • document.getElementsByTagName("input")[0]