Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

BRIANNA LANFORD
BRIANNA LANFORD
30 Points

Hi, I need to my name and the time shown when I click the button "Show me!" I'm clicking it but it's not showing. Help?

This is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JS08 Hands On</title>
  </head>
  <body>
    <h1>Welcome to my page!</h1>
    <h2>Date: <span id="date"></span></h2>
    <h2>My Name: <span class="name"></span></h2>
    Click the button below to see information about the current date and my
    name.
    <br />
    <button onClick="showDateAndName()">Show me!</button>
    <script src="script.js"></script>
  </body>
</html>

JavaScript:

const showMyInfo = () => {
  const date = new Date();
  const month = date.getMonth();
  const day = date.getDay();
  const year = date.getFullYear();
  const dateString = `${month}/${day}/${year}`;
  document.getElementById('date').innerHTML = dateString;
  document.getElementById('name').innerHTML = 'Brianna';
};

2 Answers

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi BRIANNA LANFORD 👋

You're very close to get this working! There's two small issues that need to be fixed. First of all you've written your code in a function named showMyInfo() so you'll want to call that function to make it run. Currently you're calling the showDateAndName() function when the button is clicked but that doesn't seem to exist so you'll want to change that to showMyInfo() instead.

After that change the date should show up. The only thing not working is your name, this is because the span currently has a class. While in your JavaScript you're selecting the element with getElementById. You can fix this by changing class to id in your HTML on line 9 🙂

Hope this helps

BRIANNA LANFORD
BRIANNA LANFORD
30 Points

Hi!

Thanks so much for the help! :) So I've made the changes suggested, but it's still not displaying my name or the date. I'm so lost on what's missing.

HTML: <!DOCTYPE html> <html lang="en"> <head> <title>JS08 Hands On</title> </head> <body> <h1>Welcome to my page!</h1> <h2>Date: <span id="date"></span></h2> <h2>My Name: <span id="name"></span></h2> Click the button below to see information about the current date and my name. <br /> <button onClick="showMyInfo()">Show me!</button> <script src="script.js"></script> </body> </html>

JAVA: const showMyInfo = () => { const date = new Date(); const month = date.getMonth(); const day = date.getDay(); const year = date.getFullYear(); const dateString = ${month}/${day}/${year}; document.getElementById('date').innerHTML = dateString; document.getElementById('name').innerHTML = 'Brianna'; };

In the html file, you are calling a showDateAndName function which is not defined in script.js. The function in script.js is named showMyInfo.

Try changing either <button onClick="showDateAndName()">Show me!</button> to <button onClick="showMyInfo()">Show me!</button> in the html file or showMyInfo to showDateAndName in script.js.

BRIANNA LANFORD
BRIANNA LANFORD
30 Points

Hi!

Thanks so much for the help! :) So I changed my function in script.js to match my html, but it's still not working.

HTML: <!DOCTYPE html> <html lang="en"> <head> <title>JS08 Hands On</title> </head> <body> <h1>Welcome to my page!</h1> <h2>Date: <span id="date"></span></h2> <h2>My Name: <span id="name"></span></h2> Click the button below to see information about the current date and my name. <br /> <button onClick="showMyInfo()">Show me!</button> <script src="script.js"></script> </body> </html>

JAVA: const showMyInfo = () => { const date = new Date(); const month = date.getMonth(); const day = date.getDay(); const year = date.getFullYear(); const dateString = ${month}/${day}/${year}; document.getElementById('date').innerHTML = dateString; document.getElementById('name').innerHTML = 'Brianna'; };

With the html file in the same folder as the JavaScript and the JavaScript in a file named script.js, the page updates successfully for me with your updated code when the button is clicked, giving a name of Brianna and a date of 0/4/2022, since it's the first month of 2022 and a Thursday.