javascript call another function on click event

Question

I wrote a function called formatAMPM that finds the current time. I want to call the this function when I click on the object named buttonfifteenMins. But I didn't succeed.

I want to update the value of a textbox according to the result from here

function formatAMPM(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}

var input = document.getElementById('dateTimeRange');
var buttonfifteenMins = document.getElementById('fifteenMins');

buttonfifteenMins.onclick = function() {
  input.value = formatAMPM(new Date);
};

<input type="text" id="dateTimeRange" />
<button type="button" id="fifteenMins">15 min</button>

Did you mean to write `new Date()` in the function call parameter list? Is your script element embedded at the end of the body (after the elements you are targeting)? — jeffjenx, Dec 14 '21 at 14:46
@mplungjan your snippet adds an additional issue. Perhaps the input should just be text for simplicity. The question says "text box". but you made input type="date" — Wyck, Dec 14 '21 at 14:51
Now is a great time to start [using your debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in the browser's debugger, observe the values and results of each operation in your function. When you do this, which operation first produces an unexpected result? What were the values used? What was the result? What result was expected? Why? — David, Dec 14 '21 at 14:52
Please be specific when you say "But i couldn't succeed" What actually happens that's different from what you intended? — Wyck, Dec 14 '21 at 14:53
@ZaInKhAn Why is that important? The code presented is vanilla JS — mplungjan, Dec 14 '21 at 15:36
@mplungjan just asking because if he is using jQuery so a lot of code can be optimized as well — Zain Khan, Dec 14 '21 at 15:40
@ZaInKhAn You mean changing `document.getElementById('fifteenMins').onclick` to `$('#fifteenMins').on("click",` - not really a huge optimisation. jQuery is no longer as useful as it used to be — mplungjan, Dec 14 '21 at 15:51
For in example my answer jQuery would be visible in three lines: `const input = document.getElementById('dateTimeRange');` , `document.getElementById("offsetDiv").addEventListener("click"` and `input.value =` That's all — mplungjan, Dec 14 '21 at 15:54
In this question, it is about TWO elements only. Nothing else is jQuery "optimisable" — mplungjan, Dec 14 '21 at 15:55
Consider `hours = hours % 12 || 12;` to save a line of code. :-) — RobG, Dec 15 '21 at 02:45

mplungjan · Answer 1 · 2021-12-14T16:00:01.850

Perhaps you meant this?

I added an offset to the button and the show the date (otherwise why have aDay, aWeek and aMonth?)

I saved you all the button assignments too

const pad = num => String(num).padStart(2, "0");
const aMin = 60 * 1000;
const offsets = {
  "fifteenMins":    15 * aMin,
  "anHour":         60 * aMin,
  "fourHours":  4 * 60 * aMin,
  "aDay":      24 * 60 * aMin,
  "aWeek": 7 * 24 * 60 * aMin
}

function formatAMPM(date, offset) {
  if (offset) date.setTime(date.getTime() + offset)
  let hours = date.getHours();
  let minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  return  `${pad(date.getMonth() + 1)}/${pad(date.getDate())}/${date.getFullYear()} @ ${hours}:${pad(minutes)} ${ampm}`;
}

const input = document.getElementById('dateTimeRange');

document.getElementById("offsetDiv").addEventListener("click", function(e) {
  const tgt = e.target;
  console.log(tgt.id)
  const key = tgt.id;
  const d = new Date();
  let offset = offsets[key];
  if (key === "aMonth") {
    d.setMonth(d.getMonth() + 1); // add one month - this will be weird on the 31st of Jan for example
    offset = 0;
  }
  input.value = formatAMPM(d, offset);
});

<input type="text" id="dateTimeRange" />
<div id="offsetDiv">
  <button type="button" id="fifteenMins">15 min</button>
  <button type="button" id="anHour">1 hour</button>
  <button type="button" id="fourHours">4 hours</button>
  <button type="button" id="aDay">1 day</button>
  <button type="button" id="aWeek">A week</button>
  <button type="button" id="aMonth">A month</button>
</div>

javascript call another function on click event

1 Answers1