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

Posted by 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
Rohald van Merode
.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'; };

jb30
jb30
44,806 Points
jb30
jb30
44,806 Points

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'; };

jb30
jb30
44,806 Points

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.