textContent property unable to change text on button??

Question

Hi, I cant not figure out why the button does not change text when its clicked. This line is suppose to set the text on button but it does not?

toggleList.style.textContent = 'Hide List';

const toggleList = document.getElementById('togglelist');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button');

//Hide List and change Button text
toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.style.textContent = 'Hide List';
    listDiv.style.display = 'block';
  } else {
    toggleList.style.textContent = 'Show List';
    listDiv.style.display = 'none';

  }

});

button.addEventListener('click', () => {
  p.innerHTML = 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>
  <button id='togglelist'>Hide List</button>
  <div class="list">
    <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>
  </div>
  <script src="app.js"></script>

</body>

</html>

Answer 1 · 2018-05-08T18:05:51Z

May 8, 2018 6:05pm

The "textContent" property is associated directly with the element. It's not a sub-property of "style".

Try this instead:

toggleList.textContent = 'Hide List';

Welcome to the Treehouse Community

Looking to learn something new?

Nermin Kekic

Nermin Kekic

textContent property unable to change text on button??

1 Answer

Steven Parker

Steven Parker

Nermin Kekic

Nermin Kekic