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

Posted by Jesse Vorvick
Jesse Vorvick
6,047 Points

My extra credit solution ("Experiment with app" in Teacher's Notes)

My solution for the suggestions to play around with the app as stated at the end of the video and in the teacher's notes.

JavaScript:

const myHeading = document.getElementById('myHeading');

const colorTextInput = document.getElementById('colorTextInput');
const colorButton = document.getElementById('colorButton');
const colorResetButton = document.getElementById('colorResetButton');

const styleTextInput = document.getElementById('styleTextInput');
const styleButton = document.getElementById('styleButton');
const styleResetButton= document.getElementById('styleResetButton');

colorButton.addEventListener('click', () => {
  myHeading.style.color = colorTextInput.value;                           
});

colorResetButton.addEventListener('click', () => {
  myHeading.style.color = '#484848';                             
});

styleButton.addEventListener('click', () => {
  myHeading.style.backgroundColor = styleTextInput.value;                            
});

styleResetButton.addEventListener('click', () => {
  myHeading.style.backgroundColor = null;                                  
});

HTML:

<!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>
      <input type="text" id="colorTextInput">
      <button id="colorButton">Set headline color</button>
      <button id="colorResetButton">Reset title color</button>
    </p>
    <p>
      <input type="text" id="styleTextInput">
      <button id="styleButton">Set headline style</button>
      <button id="styleResetButton">Reset title style</button>
    </p>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Eric M
Eric M
11,545 Points
Eric M
Eric M
11,545 Points

Hi Jesse,

Good work extending the content from this video!

I don't have any feedback on your code itself, but I do have some UX feedback.

Your buttons refer to the same element as both "headline" and "title", this is a little confusing. It's always good to be consistent with terms so that the user of your app can learn what to expect from it.

The buttons for the second input box refer to "style" it wasn't clear at all to me that this meant background colour. I first tried typing in "italic", "heavy", and "underline" though even these were guesses as to what style might mean. Looking at the code made it clear that this was setting the background colour. Just as you should be clear and explicit in the naming of your functions and variables you should be clear and explicit in your user interface.

It's awesome that you actually did the extra credit stuff and even better that you posted your code to the forums for feedback.

Happy coding,

Eric

Jesse Vorvick
Jesse Vorvick
6,047 Points

Thank you so much! Fixed for personal satisfaction and experience!!