Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Making Changes to the DOM Modifying Elements

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>

3 Answers

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

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

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.

Thanks jb30! It worked as you said it would!

Kavitha Mahesawarappa Sujatha
Kavitha Mahesawarappa Sujatha
9,065 Points

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