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

Andrew Kovalenko
PRO
Andrew Kovalenko
Pro Student 10,501 Points

Uncaught Reference Error: p is not defined

When I want declare to a variable p.description a value of input.value it returns p is not defined in the Chrome Devtools. Maybe there is another way of fixing this problem?

3 Answers

Oenas Vaes
PRO
Oenas Vaes
Front End Web Development Techdegree Graduate 17,318 Points
const p = document.querySelector('p .description')

I noticed you have a space in the selectors parameter. It should look like this instead;

const p = document.querySelector('p.description');

EDIT: Formatting

Andrew Kovalenko
PRO
Andrew Kovalenko
Pro Student 10,501 Points

index.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>    
    <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>```
Andrew Kovalenko
PRO
Andrew Kovalenko
Pro Student 10,501 Points
const input = document.querySelector('input')
const p = document.querySelector('p .description')
const button = document.querySelector('button')

button.addEventListener('click', () => {
    p.textContent = input.value + ':' //Devtools compiler highlight input.value and indicates a Type error: cannot set property 'textContent' of null
});