Vanilla Javascript：一个 Function，两个按钮，两个输入

Question

基本上，我要做的就是将一个 function应用于两个按钮和两个输入。 例如，我想在单击“开始时间”按钮时获取当前时间并将其放入“开始时间”输入中，反之亦然。

在下面的代码中，我可以通过单击父 div 将当前时间输入“开始”和“结束”输入，但是我不知道如何使用按钮进行这项工作。

 var timeField = document.querySelectorAll(".input-container-dd"); for (let i = 0; i < timeField.length; i++) { timeField[i].onclick = function getTime() { var tz_offset = new Date().getTimezoneOffset() * 60000; var time = new Date(Date.now() - tz_offset).toISOString().slice(11, 16), timefield = this.children[2]; timefield.value = time; } }

 <!-- Start Time --> <div class="input-container-dd"> <label for="time">Start Time</label><br> <input class="input-field" id="start-time" type="time" name="time"> <button id='start-btn'>Current</button> </div> <!-- End Time --> <div class="input-container-dd"> <label for="time">End Time</label><br> <input class="input-field" id="end-time" type="time" name="time"> <button id='end-btn'>Current</button> </div>

Answer 1

通过使用el.onclick = setTimeFields或el.addEventListener('click', setTimeFields)将其绑定到多个事件侦听器，您可以根据需要多次重复使用偶数回调。

笔记

1. 元素 ID 必须是唯一的：您不能识别具有相同 ID 的多个元素，您必须为此使用类（请参阅 2x button.classBtn而不是 2x button#btn ）。

2. this.children[2]对按钮和输入都没有意义 - 相反，我们将 go 直到父级，然后在其上搜索.timeField输入并参考它。

 // input fields and buttons var timeBtns = document.querySelectorAll('.timeBtn'); // define logic to fill in timeFields function setTimeFields(e) { // get timestring let tz_offset = new Date().getTimezoneOffset() * 60000, time = new Date(Date.now() - tz_offset).toISOString().slice(11, 16); // get nearby input, set value const timeField = this.parentNode.querySelector('.timeField'); // fill input timeField.value = time; } // bind to.timeBtn onClick for (const timeBtn of timeBtns) timeBtn.onclick = setTimeFields;

 <!-- Start Time --> <div class="input-container-dd"> <label for="time">Start Time</label><br> <input class="timeField" id="start-time" type="time" name="time"> <button class="timeBtn">Current</button> </div> <!-- End Time --> <div class="input-container-dd"> <label for="time">End Time</label><br> <input class="timeField" id="end-time" type="time" name="time"> <button class="timeBtn">Current</button> </div>