HTML Form input value not updating in javascript function

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

That is because in JavaScript, primitives (strings, numbers, booleans, etc.) are assigned by value not by reference. — Titus
– Titus, Commented May 20, 2019 at 10:05

Stavros Angelis · Accepted Answer · 2019-05-20 10:27:28Z

2

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

answered May 20, 2019 at 10:27

Stavros Angelis

9725 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rufus Over a year ago

thanks very much for this, it worked great. I have just updated my post with my own way as well which seemed to work ok.

Collectives™ on Stack Overflow

HTML Form input value not updating in javascript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related