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
Roy Cma
3,054 Pointsgetting an element by its ID
I am pretty sure this should be correct. It is basically a copy-paste of the previous code (which passed) Q: Next, declare a new variable named input. Point the variable to the input element with the ID input-phrase. Use the method that returns an element matching the specified ID.
A:
// Complete the challenge by writing JavaScript below
const button = document.getElementById( 'btn-phrase' );
const input = document.getElementById( 'input-phrase' );
button.addEventListener('click', () => {
alert(input.value);
});
Response: Bummer: Are you using the method that targets an element by its ID?
// Complete the challenge by writing JavaScript below
const button = document.getElementById( 'btn-phrase' );
const input = document.getElementById( 'input-phrase' );
button.addEventListener('click', () => {
alert(input.value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phrase Sayer</title>
</head>
<body>
<p><label for="input-phrase">Type a phrase</label></p>
<p><input type="text" id="input-phrase"></p>
<p><button id="btn-phrase">Say Phrase</button></p>
<script src="app.js"></script>
</body>
</html>
3 Answers
Rohald van Merode
Treehouse StaffHey Roy Cma 👋
It looks like the tests setup for this challenge are not expecting the spaces surrounding the argument. In order to pass the challenge as expected you'll want to remove the spaces around your 'input-phrase'.
I'm not entirely sure why it did accept the button task and then failed on the second one, in real world adding spaces like this should not affect the behavior of the code. I'll bring this up with the team to see if we can adjust this behavior 🙂
Hope this helps!
Roy Cma
3,054 PointsI'd like to report this bug too:
For the first button task, this code
// Complete the challenge by writing JavaScript below
const button = document.getElementById('btnhrase');
button.addEventListener('click', () => {
alert(input.value);
});
produces this message instead of a helpful response.
Bummer: Cannot read property '1' of null
Roy Cma
3,054 PointsCan you also check the other challenges ?(e.g. select-by-tag-name) it seems the same message, "cannot read property '1' of null" is showing if you enter the wrong value inside getElementByTagName
Rohald van Merode
Treehouse StaffHey Roy Cma,
These messages are expected behavior and are similar to those what you would encounter on a real-world project:
Uncaught TypeError: Cannot read properties of null
Tests that are setup for these challenges are designed to check if your code behaves as expected. However, errors that completely halt your code or prevent the tests from running, like a TypeError, will display the default JS errors you'd typically see in a console.
This approach mimics a real-world development environment, preparing you for situations you'll face in actual projects, and helps you develop crucial skills in interpreting and debugging standard error messages.
While it might seem challenging at first, learning to understand these error messages is an invaluable skill for any developer.
Hope this clears things up 🙂