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 Getting and Setting Text with textContent and innerHTML

Tomasz Grodzki
Tomasz Grodzki
8,130 Points
Posted by Tomasz Grodzki
Tomasz Grodzki
8,130 Points

Why .textContent doesn't work with const input?

Almost everything's clear. I know how to use input and textContent. But all in all, why input.textContent doesn't work? 

const input = document.querySelector ( "input" );
const p = document.querySelector ( "p.description" );
const button = document.querySelector ( "button" );

//button.addEventListener ( 'click', () => p.textContent = input.textContent + ':' ) <--- why it doesn't work the same like this line below?
button.addEventListener ( 'click', () => p.textContent = input.value + ':' )

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>    
    <p class='description'>Things that are purple:</p>
    <input type="text" class="description">
    <button class='description'>Change list description</button>
    <ul>
      <li>grapes</li>
      <li>amethyst</li>
      <li>lavender</li>
      <li>plums</li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

3 Answers

Melvin Ray
PLUS
Melvin Ray
Courses Plus Student 6,312 Points
Melvin Ray
Melvin Ray
Courses Plus Student 6,312 Points

I checked https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for information on the "textContent" attribute of an <input> tag. According to the first link, textContent returns all elements within a node (some top-level container on a web page, not to be confused with the web server node.js). According to the Chrome browser, <input> must have inherited the attribute from <node>.

However, per the second link provided above, "textContent" is not even listed as an attribute of <input>. I don't think that it should be, because <input> is a self-closing tag. The <input> element cannot contain nodes, because that would require it to have a corresponding </input> tag. The creature simply does not exist.

I assume that the browser that didn't catch the problem of the missing "textContent" attribute of <input> must have a bug. As I write this, Google Chrome is not complaining about the missing attribute. It quietly gives me an empty string.

I hope this helps answer your question.

Tomasz Grodzki
Tomasz Grodzki
8,130 Points
Tomasz Grodzki
Tomasz Grodzki
8,130 Points

Yes, it is completely helpful. Thank you for your help! I really appreciate such good answer.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

When u use query selectors u have to specify the class or the id u used to define the element in the html

Tomasz Grodzki
Tomasz Grodzki
8,130 Points
Tomasz Grodzki
Tomasz Grodzki
8,130 Points

I would have to if there was more than one input, wouldn't I? Even though, I changed 

const input = document.querySelector ( "input" );

to 

const input = document.querySelector ( "input.description" );

And it didn't change anything. What I missed?

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 Points

The reason why.....

button.addEventListener ( 'click', () => p.textContent = input.textContent + ':' );

.....didn't work is because you use the value property to return the text or whatever you type in an input element. The textContent property allows you to change the text of an element. In this case, we need the value you would type in the input element to change the text of the p element. That's why it is written as p.textContent, because it's the <p> elements text we want to change with the value we've typed in the input element. We don't want to change the text a user types in an input element.