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 Making Changes to the DOM Modifying Elements

Posted by Mel Rojo
.a{fill-rule:evenodd;}techdegree
Mel Rojo
Full Stack JavaScript Techdegree Student 4,699 Points

How do I set the text content of the <p> element with the class info to the value stored in inputValue?

I keep getting the error: Bummer: There was an error with your code: TypeError: 'null' is not an object (evaluating 'document.getElementById('info').textContent = inputValue')

I have been researching how to complete this task but I am still stuck.

app.js 
var inputValue = document.getElementById('linkText').value;
document.getElementById('info').textContent = inputValue;
index.html 
<!DOCTYPE html>
<html>
    <head>
      <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
      <div id="content">
        <label for="linkText">Link Text:</label>
        <input type="text" id="linkText" value="sample text">
        <p class="info"></p>
      </div>
    <script src="app.js"></script>
  </body>
</html>

4 Answers

jb30
jb30
44,805 Points
jb30
jb30
44,805 Points

info is a class, not an id. Instead of document.getElementById('info').textContent = inputValue;, try document.getElementsByClassName('info')[0].textContent = inputValue;.

jsimms
jsimms
5,092 Points

How come we needed to put the index value for it to run properly?

jb30
jb30
44,805 Points

The document.getElementsByClassName method returns an HTML collection, not an element. There could be multiple elements in the HTML collection, and they could all have different values for their textContent. The index value is used to specify which element from the collection to get the textContent from.

Bodie Wood
seal-mask
.a{fill-rule:evenodd;}techdegree
Bodie Wood
Full Stack JavaScript Techdegree Student 4,027 Points
Bodie Wood
.a{fill-rule:evenodd;}techdegree
Bodie Wood
Full Stack JavaScript Techdegree Student 4,027 Points

You can use document.querySelector() to target the info class.

For example:

const inputValue = document.querySelector('input').value;
document.querySelector('.info').textContent = inputValue;

This is a simple way to the solution.

Mel Rojo
seal-mask
.a{fill-rule:evenodd;}techdegree
Mel Rojo
Full Stack JavaScript Techdegree Student 4,699 Points
Mel Rojo
.a{fill-rule:evenodd;}techdegree
Mel Rojo
Full Stack JavaScript Techdegree Student 4,699 Points

Thanks jb30! It worked as you said it would!

Kavitha Mahesawarappa Sujatha
Kavitha Mahesawarappa Sujatha
9,066 Points
Kavitha Mahesawarappa Sujatha
Kavitha Mahesawarappa Sujatha
9,066 Points

const inputValue = document.querySelector('input').value; document.querySelector('p').textContent = inputValue;