ValueChange() event doesn't work on mobile

Question

I am writing a calculator

The problem: i need to add $('.plan-select').val() into $('output').text() on button click. Events change() and input() didn't help catch the change of it in handler, so i found ValueChange() event here https://developer.mozilla.org/ru/docs/Web/Events.

I need <output> to instant refresh while click, it works fine with ValueChange() on PC but doesn`t work correctly on mobile.

// Button
$('.plan-select').on('click', function() {
  var value = $(this).data("plan");
  $(".planlist").val(parseInt(value)).change();
});


// Handler. it collects checked checkboxes and <select> statement
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    value = form.querySelectorAll('[name^="labelname"]'),
    output = document.querySelector('output');

  function total() {
    output.innerHTML = [].reduce.call(elem, function(sum, el) {
      var n = (+el.value || 0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
      return sum + n
    }, 0);
  }

  form.addEventListener('ValueChange', total);
  form.addEventListener('change', total);
  form.addEventListener('input', total);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Hidden</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10">
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15">
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24">
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10">
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>

Button: https://elevate.kz/#plans

Handler: https://elevate.kz/#pricing

Thank you.

Answer 1

You had wrong quotes around genre3

Try to use jQuery all the way:

function total() {
  let sum = 0;
  $("form :input").each(function() {
    var n = (+this.value || 0) * (this.checked || this.tagName == "SELECT" || this.type == "text");
    sum += n
  })
  $(".total").text(sum);
}  

$(function() {
  // Button
  $('.plan-select').on('click', function() {
    var value = $(this).data("plan");
    $(".planlist").val(parseInt(value)).change();
  });

  $("#calc").on("change", "select[name^=itemtype]", total)
  $("select[name^=itemtype]").trigger("change"); 
  $("#calc").on("touchstart click", "input[type=checkbox][name^=itemtype]", total); 
  $("#calc").on("input", "input[type=text][name^=itemtype]", total); // if exists


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Buttons -->
<a href="#pricing" class="plan-select" data-plan="35000">Option1</a>
<a href="#pricing" class="plan-select" data-plan="45000">Option2</a>
<a href="#pricing" class="plan-select" data-plan="65000">Option3</a>



<!-- Form -->
<div id="pricing">
  <form id="calc">
    <select name="itemtype5" class="planlist" id="l">
      <option class="no-display" value="0">Сайт-визитка</option>
      <option value="35000">Option1</option>
      <option value="45000">Option2</option>
      <option value="65000">Option3</option>
    </select>

    <input type="checkbox" class="checkbox_check" name="itemtype1" id="d" data-genrename="Genre1" value="3000" data-time="10" />
    <label>Genre1</label>

    <input type="checkbox" class="checkbox_check" name="itemtype2" id="e" data-genrename="Genre2" value="4000" data-time="15" />
    <label>Genre</label>

    <input type="checkbox" class="checkbox_check" name="itemtype3" id="f" data-genrename="Genre3" value="10000" data-time="24" />
    <label>Genre3</label>

    <input type="checkbox" class="checkbox_check" name="itemtype4" id="g" data-genrename="Genre4" value="3000" data-time="10" />
    <label>Genre4</label>


    <label>Total:</label>
    <output name="o" class="total" for="a b c d e f g h l">35000</output>

  </form>
</div>