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

Posted by Adam Fields
Adam Fields
4,487 Points

whats wrong with my code I believe I have it right

here it is 

Html:<!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>
     <button>Hide List</button>
    <div class="list">
        <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>
          <input type='text' class='addItem'>
        <button class='addItemButton'>Add Item</button>
        <button class='removeItemButton'>Remove Item</button>
     </div>
    <script src="app.js"></script>
  </body>
</html>

Javascript:

const input=document.querySelector('input');
const p=document.querySelector('p.description');
const button=document.querySelector('button');
button.addEventListener('click',() =>{
   p.textContent.value;                     
                        });

1 Answer

Nick Hericks
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 Points
Nick Hericks
.a{fill-rule:evenodd;}techdegree seal-36
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 Points

Hey Adam,

First, getting right into your code, I see two things.

  1. The button variable you create in your JS file is selection the first button tag in your HTML, so it is selecting the "Hide List" button tag instead of the button tag that you want. You can specify you querySelector by choosing 'button.description'
  2. Take a closer look at what you have inside the addEventListener. Currently it isn't updating anything, but changing it to p.textContent = input.value + ':'; will update the text content on the page.

Those changes should get it working.

On another note, just a tip for posting code. It will be easier to read if markdown is used. When answering questions there is actually a link to a markdown cheatsheet, however the cheatsheet is not available when asking a question. I've put in a request with Treehouse support to make that available when asking questions as I'm sure it will help many (myself included!).

For now, knowing this one piece of markdown really has helped me... you can highlight sections of code by surrounding it with ``` marks and including the language used, like this...

```html

<p>code goes here</p>

```

or

```JavaScript

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

```

So by doing that your code turns into what we see below which is much easier for people to read and respond to.

<!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>
  <button>Hide List</button>
  <div class="list">
    <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>
      <input type='text' class='addItem'>
      <button class='addItemButton'>Add Item</button>
      <button class='removeItemButton'>Remove Item</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

const input=document.querySelector('input');
const p=document.querySelector('p.description');
const button=document.querySelector('button');
button.addEventListener('click',() =>{
  p.textContent.value;
});
Adam Fields
Adam Fields
4,487 Points

I tried your suggestion I got it to work. I was wondering why the teacher in the video didnt do it that way but got it to work?