JavaScript调用点击事件的另一个函数

Question

我写了一个名为formatAMPM的函数来查找当前时间。我想调用这个函数，当我点击名为按钮的对象。但是我没有成功。

我想根据这里的结果更新文本框的值

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>

Answer 1

也许你是这个意思？

我添加了一个偏移量的按钮和显示日期（否则为什么有一天，一周和一个月？）

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


var input = document.getElementById('dateTimeRange');
var buttonfifteenMins = document.getElementById('fifteenMins');
var buttonanHour = document.getElementById('anHour');
var buttonfourHours = document.getElementById('fourHours');
var buttonaDay = document.getElementById('aDay');
var buttonaWeek = document.getElementById('aWeek');
var buttonaMonth = document.getElementById('aMonth');

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)
    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>