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

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

you are missing your closing bracket

myOtherButton.addEventListener("click", () => {
  myHeading.style.color = "black";                               
});
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.

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

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

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.