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

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

Harrison Greeves
Harrison Greeves
2,920 Points
Posted by Harrison Greeves
Harrison Greeves
2,920 Points

My text input won't work correctly?

<!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>
    <input type = "text" id = "myTextInput">
    <button id = "myButton">Change heading color</button>
    <button id = "myOtherButton">Change color back to black</button>
    <script src = "app.js"></script>
  </body>
</html>

const myHeading = document.getElementById("myHeading");
const myButton = document.getElementById("myButton"); 
const myTextInput = document.getElementById("myTextInput"); 

myButton.addEventListener("click", () => {
  myHeading.style.color = myTextInput.value;                           
});

myOtherButton.addEventListener("click", () => {
  myHeading.style.color = "black";                               
}

3 Answers

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

you are missing your closing bracket 

myOtherButton.addEventListener("click", () => {
  myHeading.style.color = "black";                               
});
Harrison Greeves
Harrison Greeves
2,920 Points
Harrison Greeves
Harrison Greeves
2,920 Points

Thanks, but I don't understand how that works as there was no closing bracket issue on the first button which is the one that makes the heading change colour.

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

Your first one has a closing bracket, adding one to the second causes error not to be thrown

Harrison Greeves
Harrison Greeves
2,920 Points
Harrison Greeves
Harrison Greeves
2,920 Points

Sorry I meant to put that it does have a closing bracket. I don't quite understand why not having one on the 2nd one would affect the 1st.

Vasanth Baskaran
Vasanth Baskaran
4,333 Points
Vasanth Baskaran
Vasanth Baskaran
4,333 Points

Please specify the error you are getting, so that we can narrow it down !. It seems like javaScript interpreter is encountering error while parsing the js file.