How can I get to the original `textContent` of p?

Question

Hi guys, so I'm doing the Styling elements lesson and in it we created a hide list button, that would hide the content. There's also a change list description button that changes the description of the list with whatever we type in the input box. however, when the input field is empty and you click the button, it changes the title to a : which was concatenated to the end of the value of p. I'm trying to create a conditional statement that would check to see if the input field is empty, then it would change the title to the original content of p. However, since we use the input field to change the title, when you delete the message in the input field the new textContent of p was changed to the last message you typed in the input field. So what I mean is, with my current app when I refresh and click change before typing anything into the input field the content in p is correct. But when I type something into the input field then change the title and then delete what I typed and click the button again, the program is working, but it's using the last word I typed in the input field to replace the title. I want it to go back to what the original message was. Example. The original message was Things that are purple. when I change it to things that are red then delete that message and click the button again, it still says things that are red. i want it to go back to say things that are purple. I can't seem to figure out how to do that.

video link: https://teamtreehouse.com/library/styling-elements

My app:

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



toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
  toggleList.textContent = 'Show list';
  listDiv.style.display = 'none';
  }
})

button.addEventListener('click', () => {
  if (input.value == "") {
    p.innerHTML = p.textContent;
  } else {
    p.innerHTML = input.value + ':';
  }
});

Here's the HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>

    <button type="button" name="button" id="toggleList">Hide list</button>
<div class="list">
      <p class="description">Things that are purple:</p>

      <input type="text" name="" value="" class="description">
      <button type="button" name="button" class="description">Change list description</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>

</div>
    <script src="js/styling-elements.js"></script>
  </body>
</html>

Answer 1 · 2017-12-21T04:01:54Z

December 21, 2017 4:01am

Instead of resetting it to its own contents when the input is empty, just set it to what you want:

button.addEventListener('click', () => {
  if (input.value == "") {
    p.innerHTML = "Things that are purple:";
  } else {
    p.innerHTML = input.value + ':';
  }
});

If you did not know what the HTML was going to be like originally, you could save the content in a variable when the program starts and use that to restore:

var oldMessage = p.textContent;
button.addEventListener('click', () => {
  if (input.value == "") {
    p.innerHTML = oldMessage;
  } else {
    p.innerHTML = input.value + ':';
  }
});

Welcome to the Treehouse Community

Looking to learn something new?

SAMUEL LAWRENCE

SAMUEL LAWRENCE

How can I get to the original `textContent` of p?

1 Answer

Steven Parker

Steven Parker

SAMUEL LAWRENCE

SAMUEL LAWRENCE