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

apps.js I wrote this code as it shows in the video but it keeps giving me an error

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

eslam said
eslam said
Pro Student 6,733 Points

Please give us html code as well and Wrap your code with 3 backticks (```) on the line before and after

5 Answers

<!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 calss="description">Things that are purple:</p>
<input type="text" calss ="descripition">
<button class="description">change list desciption</button>
<ul>
  <li>grapes</li>
  <li>amethyst</li>
  <li>lavender</li>
  <li>plums</li>
</ul>
<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 = input.value + ':'; });

Tsenko Aleksiev
Tsenko Aleksiev
3,811 Points

Many many typos:

 <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 ="input">
<button class="button">change list desciption</button>
<ul>
  <li>grapes</li>
  <li>amethyst</li>
  <li>lavender</li>
  <li>plums</li>
</ul>
<script src="app.js">
</script>
</body> 
</html>

JS

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

button.addEventListener('click', () => { p.textContent = input.value; //+ ':'; });

Be more careful when writing your code and check it all the time you write. For example:

<p calss="description">Things that are purple:</p>

It's "class" not "calss", but most important mistake, when you use querySelector you have to specify what exactly are you selecting - a class, an id or else. I mean that you have missed the dot "." before the name of each class:

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

The other thing is that when you use querySelector you must select the exact class:

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

Your class is only ".description".

eslam said
PRO
eslam said
Pro Student 6,733 Points
const input = document.querySelector('input')
const p = document.querySelector('p.description');
const button = document.querySelector('button');

there in point giving your button and input and p the same class if you only have a single tag of each

this was the code form the work space video

There are no problems in the addEventListener() method. But, there are two problems in your code.

1st problem:

<p calss="description">Things that are purple:</p>

In the above html code, 'calss' must be 'class'.

<p class="description">Things that are purple:</p>

2nd problem:

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

According to the above javascript code, you must use 'p.description' instead of 'p-description' to access the p element which has a class name called 'description'.

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

After fixing these two problems, you code will work fine.