Vanilla Javascript: One Function, Two Buttons, Two Inputs

Question

Basically, all I am trying to do is apply one function to two buttons and two inputs. For Example, I'd like to get the current time and put it into the "start-time" input when the "start-time" button is clicked, or vice versa.

In the code below, I am able to get the current time into the 'start' and 'end' inputs by clicking on the parent div, however I am lost on how to make this work using the buttons.

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>

`btn` id needs to be unique. Its not a good practice to have same `id` selector for different elements. — Always Helping, Jul 15 '20 at 01:54
Do you want to keep the current behavior as well? I mean do you want to set the input value to current time by both clicking the parent div and the buttons? — ibrahim mahrir, Jul 15 '20 at 03:00
@ibrahimmahrir Sorry for the late response! No, just the when the button is clicked. **Luckily**, I saw your answer before you deleted and was able to copy and paste before I left for work this morning. It was exactly what I was trying to do. I appreciate you taking your time to answer. I wish you would have left it up for others having the same problem, it was a good answer. — DSG, Jul 16 '20 at 00:53

C. Lewis · Accepted Answer · 2020-07-16T04:23:22.983

You can reuse the even callback as many times as you want by binding it to multiple event listeners with el.onclick = setTimeFields or el.addEventListener('click', setTimeFields).

Notes

Element IDs must be unique: you cannot identify multiple elements with the same ID, you must use classes for that (see 2x button.classBtn instead of 2x button#btn).
this.children[2] will not make sense for both the button and the input - instead, we will go up to the parent, and then search it for the .timeField input and refer to that.

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

https://stackoverflow.com/questions/62906367/vanilla-javascript-one-function-two-buttons-two-inputs?noredirect=1#comment111278004_62906367 — ibrahim mahrir, Jul 16 '20 at 01:11
@Christian Thanks! Just to settle the debate, I was trying to prefill the input on button click. But this more than works, even learned a little extra. I can easily remove the input prefill if I want/need to. Thanks again. — DSG, Jul 16 '20 at 01:17
@DSG No problem - I edited so the unnecessary binding was removed. It's best to bind your event listeners this way so that it's that easy to hot swap them. — C. Lewis, Jul 16 '20 at 04:27

Vanilla Javascript: One Function, Two Buttons, Two Inputs

1 Answers1

Notes