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

Question

I have a simple HTML form which has an event listener binded to it and when you click on the button inside the form that has a class of 'booking__form__counter--increase' this should increase the input field value by 1. It calls a javascript function named 'increaseCounter()' I declare a variable that points to this value but when i try to use the variable to increment it, it doesn't work. If i use the methods in the variable directly it works? I am missing something simple here but i cannot work out what.

 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> 

UPDATED Javascript

I have had a play around and added my updated javascript below which now seems to be working ok. I removed the data attributes 'data-max-count' and just added in the 'max' attribute and changed the variable decelerations around.

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

I re-wrote your js and it now works. You had some issues with your selectors and the way you updated the values. I associated the max-count with the hidden input you have there and read the data-max-count attribute value. If this is not present then the auto-increment doesn't work because I set the initial value of inputMaxCounterValue equal to 0. Keep in mind that I only update what the user sees and not the input value.

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