javascript - HTML 表单输入值未在 JavaScript 函数中更新

Question

我有一个简单的 HTML 表单，它绑定(bind)了一个事件监听器，当您单击表单内具有“booking__form__counter--increase”类的按钮时，这应该将输入字段值增加 1。它调用一个名为“increaseCounter()”的 JavaScript 函数我声明了一个指向该值的变量，但是当我尝试使用该变量来递增它时，它不起作用。如果我直接使用变量中的方法它可以工作吗？我在这里遗漏了一些简单的东西，但我无法弄清楚是什么。

let bookingForm = document.querySelector('.booking__form');
 
bookingForm.addEventListener('click', function (e) {
 
  let target = e.target;
  let inputCounterValue = target.parentElement.firstElementChild.value;
  let inputMaxCounterValue = target.parentElement.firstElementChild.dataset.maxCount;
  let showCounterValue = target.parentElement.firstElementChild.nextElementSibling.textContent;
    
  if (target.classList.contains('booking__form__counter--increase')) {
      increaseCounter();
  } 
    
  function increaseCounter() {
    if (inputCounterValue === inputMaxCounterValue) {
      return;
    } else {
      //does not update
      inputCounterValue++;
      showCounterValue = inputCounterValue;
      //this does update
      target.parentElement.firstElementChild.value++;
      target.parentElement.firstElementChild.nextElementSibling.textContent = target.parentElement.firstElementChild.value;
    }
  }    
});

<form class="booking__form">
  <div class="container">
    <div class="booking__form__group">
      <div class="booking__form__section booking__form__section--arrival">
        <div class="booking__form__control">
          <label for="arrival">Arrival Date</label>
          <div class="booking__form__counter">
            <span class="booking__form__counter--value">0</span>
            <div class="booking__form__counter--button booking__form__counter--increase">
              <svg class="fal fa-chevron-up"></svg>
            </div>
            <div class="booking__form__counter--button booking__form__counter--decrease">
              <svg class="fal fa-chevron-down"></svg>
            </div>
          </div>
        </div>
      </div>
      <div class="booking__form__section booking__form__section--duration">
        <div class="booking__form__control">
          <label for="arrival">Nights</label>
          <div class="booking__form__counter">
            <input type="hidden" name="duration" value="1" data-max-count="21">
            <span class="booking__form__counter--value">1</span>
            <div class="booking__form__counter--button booking__form__counter--increase">
              <svg class="fal fa-chevron-up"></svg>
            </div>
            <div class="booking__form__counter--button booking__form__counter--decrease">
              <svg class="fal fa-chevron-down"></svg>
            </div>
          </div>
        </div>
      </div>
      <div class="booking__form__section booking__form__section--adults">
        <div class="booking__form__control" id="booking--adults">
          <label for="arrival">Adults</label>
          <div class="booking__form__counter">
            <input type="hidden" name="adults" value="1" data-max-count="8">
            <span class="booking__form__counter--value">1</span>
            <div class="booking__form__counter--button booking__form__counter--increase">
              <svg class="fal fa-chevron-up"></svg>
            </div>
            <div class="booking__form__counter--button booking__form__counter--decrease">
              <svg class="fal fa-chevron-down"></svg>
            </div>
          </div>
        </div>
      </div>
      <div class="booking__form__section booking__form__section--children">
        <div class="booking__form__control" id="booking--children">
          <label for="arrival">Children</label>
          <div class="booking__form__counter">
              <input type="hidden" name="children" value="0" data-max-count="5">
            <span class="booking__form__counter--value">0</span>
            <div class="booking__form__counter--button booking__form__counter--increase">
              <svg class="fal fa-chevron-up"></svg>
            </div>
            <div class="booking__form__counter--button booking__form__counter--decrease">
              <svg class="fal fa-chevron-down"></svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

更新了 JavaScript

我已经尝试了一下，并在下面添加了更新的 javascript，现在似乎工作正常。我删除了数据属性“data-max-count”，只是添加了“max”属性并更改了变量减速度。

let bookingForm = document.querySelector('.booking__form');
bookingForm.addEventListener('click', function (e) {
    let target = e.target;
    let input = target.parentElement.firstElementChild;
    let displayValue = target.parentElement.firstElementChild.nextElementSibling;

    if (target.classList.contains('booking__form__counter--increase')) {
        increaseCounter();
    } else if (target.classList.contains('booking__form__counter--decrease')) {
        decreaseCounter();
    }

    function increaseCounter() {
        if (input.value === input.max) {
            return;
        } else {
            input.value++;
            displayValue.textContent = input.value;
        }
    }
}); 

Answer 1

我重写了你的js，现在它可以工作了。您的选择器和更新值的方式存在一些问题。我将最大计数与您在那里的隐藏输入关联起来，并读取 data-max-count 属性值。如果不存在，则自动增量不起作用，因为我将 inputMaxCounterValue 的初始值设置为 0。请记住，我只更新用户看到的内容，而不更新输入值。

let bookingForm = document.querySelector('.booking__form');
bookingForm.addEventListener('click', function (e) {
let target = e.target;
let parentElem = target.parentElement;
let inputCounterValue = 0;
let valueContainer = parentElem.querySelector('.booking__form__counter--value');
if (typeof valueContainer.textContent!=="undefined") {
  inputCounterValue = parseInt(valueContainer.textContent,10);
}

if (target.classList.contains('booking__form__counter--increase')) {
    increaseCounter(valueContainer);
}

function increaseCounter(element) {
  let inputMaxCounterValue = 0;
  let parentElem = target.parentElement;

  if (typeof parentElem.querySelector('input')!=="undefined" && parentElem.querySelector('input')!==null) {
    inputMaxCounterValue = parentElem.querySelector('input').getAttribute("data-max-count");
  }
if (inputCounterValue === inputMaxCounterValue) {
    return;
} else {
    //does not update
    inputCounterValue++;
    showCounterValue = inputCounterValue;
    //this does update
    element.textContent = inputCounterValue;
}