javascript 在點擊事件上調用另一個 function

Question

我寫了一個名為 formatAMPM 的 function 來查找當前時間。 當我點擊名為 buttonfifteenMins 的 object 時，我想調用這個 function。 但我沒有成功。

我想根據此處的結果更新文本框的值

 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

也許你是這個意思？

我為按鈕添加了一個偏移量並顯示了日期（否則為什么會有 aDay、aWeek 和 aMonth？）

 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>