JavaScript JavaScript and the DOM Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

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
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,643 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;
});

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?