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 Dale Skipper
Dale Skipper
10,137 Points

I need to display a current time upon a button click. I have several different buttons for different people to use.

Here is my code - The problem is I can't make the code work for each button independently. Example: I need a timestamp next to Amber's name when she clicks a button. Also, if John clicks his button it puts a timestamp next to his name. HELP!

<script>

function getTimeStamp() {
       var now = new Date();
       return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
 + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now.getSeconds()) : (now.getSeconds())));
}

function setTime() {
    document.getElementById('field').value = getTimeStamp();
}
</script>

<onload="setTime()">

<br>
<span>Amber</span>
<br>
<input id="field" type="text" name="field" value="" size="17" />
<br>

<div class="button">
<p>
  <button type="button" onclick="setTime();" class="button">Pictures</button>
  <button type="button" onclick="setTime();" class="button">Lunch</button>


<onload="setTime()">

<br>
<span>John</span>
<br>
<input id="field" type="text" name="field" value="" size="17" />
<br>

<div class="button">
<p>
  <button type="button" onclick="setTime();" class="button">Pictures</button>
  <button type="button" onclick="setTime();" class="button">Lunch</button>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dale,

I tried fixing your code formatting so that all of it would show up but some of it looks like it's missing.

Try editing your question and reposting your code in between the 3 backticks that I have added in.

See this thread for info on how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum

2 Answers

chrisp
chrisp
13,686 Points
chrisp
chrisp
13,686 Points

Hi Dale, after reading your description, I think I sort of got an idea of it. Not sure if this what you are looking for, but here is my simple approach that I came up with:

<!doctype html>
<html>
<head>
    <title>Timestamp Attempt</title>

 <script>
   var time = new Date();
   function show(id) {
     if (id == 1) {
        document.getElementById('john').value=time;
     }

     if(id == 2) {
        document.getElementById('amber').value=time;
     }
   }
</script>

</head>
<body>

John: <input type='text' id="john" value=""> 
    <button id='1' onClick="show(this.id)">Click john</button>
        <br>
Amber: <input type='text' id="amber" value=""> 
    <button id='2' onClick="show(this.id)">Click Amber</button>
</body>
</html>

I hope this can be a little helpful. Best of luck with javascript :).

Dale Skipper
Dale Skipper
10,137 Points
Dale Skipper
Dale Skipper
10,137 Points

Works like a charm! Thank you so much Chrisp.

chrisp
chrisp
13,686 Points

You're welcome. Glad it works out :).