Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tevin Mugo
Full Stack JavaScript Techdegree Student 8,649 Pointsapps.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 + ':'; });
5 Answers
Tevin Mugo
Full Stack JavaScript Techdegree Student 8,649 Points<!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
3,819 PointsMany 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
Courses Plus Student 6,734 Pointsconst 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
Tevin Mugo
Full Stack JavaScript Techdegree Student 8,649 Pointsthis was the code form the work space video
Dhanuka Anushanga
13,347 PointsThere 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.
eslam said
Courses Plus Student 6,734 Pointseslam said
Courses Plus Student 6,734 PointsPlease give us html code as well and Wrap your code with 3 backticks (```) on the line before and after