'eventHandler.apply' is undefined error when upgrading to v6

Questions
1

I am in the process of upgrading my App from v5 to v6. I have a simple weight conversion function that throws
TypeError: eventHandler.apply is not a function. (In 'eventHandler.apply(void 0, arguments)', 'eventHandler.apply' is undefined)
error in v6.
No clue as to why it would do this with such simple function.
Any help would be appreciated!

function weightConverter(source, valNum) {
        valNum = parseFloat(valNum);
        var inputPounds = document.getElementById("inputPounds");
        var inputKilograms = document.getElementById("inputKilograms");
        if (source == "inputPounds") {
            inputKilograms.value = (valNum / 2.2046).toFixed(2);
         
        }
        if (source == "inputKilograms") {
            inputPounds.value = (valNum * 2.2046).toFixed(2);
          
        }
    }

The HTML (simplified) is as follows:

<label>Pounds</label>
<input id="inputPounds" class="w3-input w3-border" type="number" placeholder="Pounds"
oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">

 <label>Kilograms</label>
 <input id="inputKilograms" class="w3-input w3-border" type="number" placeholder="Kilograms"
 oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
2

I ran it in a JS Fiddle and it seemed to execute without any issues: https://jsfiddle.net/kerrydp/zd645bct/5/

3

Yes, it works with no issues everywhere else except when I load a page with v6.
The debugger shows the error to be in vdom.js at this code:

 function handler() {
var e = arguments.length <= 0 ? undefined : arguments[0];
if (once && fired) return;
if (stop) e.stopPropagation();
if (prevent) e.preventDefault();
fired = true;
eventHandler.apply(void 0, arguments);

}

Knowing why is my problem

4

That JSFiddle is using F7 v6.3.14

So if that function works correctly, perhaps it’s a surrounding function that is crippling it? Do you have any other event listeners?

5

if it’s a component, then your syntax is wrong.

here is a (working) simple example for weight conversion.
the math is pretty simple => o.value * o.factor / i.factor

<template>
  <div class="page">
    <div class="page-content">
      <div class="list inset">
        <ul>${list.value.map(i => $h`
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">${i.unit}</div>
              <div class="item-input-wrap">
                <input type="text" class="${i.target}"
                  value="${i.value}" placeholder="${i.symbol}"
                  @input="${(e) => convert(i,e.target.value) }"
                /><span class="input-clear-button"></span>
              </div>
            </div>
          </li>`)}
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default (_,{ $f7, $ref, $once }) => {

  const list = $ref([
    { unit: 'kilogram', symbol: 'kg', factor: '1000' },
    { unit: 'pound', symbol: 'lb', factor: '453.59237' },
    { unit: 'ounce', symbol: 'oz', factor: '28.34952313' },
  ].map(i => Object.assign(i,{ target: $f7.utils.id('target-xxxxxx') })));

  const convert = (o,v) => {
    list.value.filter(i => i.unit != o.unit)
      .map(i => Object.assign(i,{ value: v*o.factor/i.factor }))
      .forEach(i => $f7.input.checkEmptyState(i.targetEl));
    list.value = list.value;
  };

  $once('pageAfterIn',(e,p) => list.value.map(i => Object.assign(i,{
    targetEl: p.$pageEl.find('.'+i.target)
  })));

  return $render;
};
</script>

you can add units to the list as you wish

{ unit: 'slug', symbol: 'slug', factor: '14593.903' },
{ unit: 'stone', symbol: 'st', factor: '6350.29318' },

just find the factor (gram)

you can get it from here: => Weight Conversion Table: gram kilogram pound ounce carat ton
or from here:

6

Thanks for the link, but I have a very specific use for the weight conversion in my App. Both inputs need to be present so that entry in one will auto convert the weight in the other as one inputs. It is used for drug dose calculations.
You can see how it works here:

https://vetcalculators.com/emergency.html

7

in my code all inputs are presents (kg,lb,oz)
just try it (it’s ready to use)

it will convert every item in the list while you typing
all of the them.

here is the convert func:

//const convert = (o,v) => {
// find all items that do not match to o.unit
list.value.filter(i => i.unit != o.unit)
  // set the value (input * o.factor / i.factor) for each item in the list
  .map(i => Object.assign(i,{ value: v*o.factor/i.factor }))
  // set state for each item in the list
  .forEach(i => $f7.input.checkEmptyState(i.targetEl));
// update dom
list.value = list.value;
//};
8

I will take a look. Thanks for taking the time to do this!

9

I’ve integrated your code into my App as a test. One issue is that entering a value in the KG input will trigger the code to calculate the dosage correctly but entering into the LBS input does not trigger correctly. It is “off” by one input, by that I mean if I enter 10 as the value, no calculation occurs but if my next input value is 12, the the previous 10 input value is used, not the currently entered value of 12. If I keep entering a different value, the previously entered value is always used.

10

i see

need to investigate
meanwhile… we can go back to classic.
try this:

<template>
  <div class="page">
    <div class="page-content">
      <div class="list inset">
        <!-- remove list.value -->
        <ul>${list.map(i => $h`
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">${i.unit}</div>
              <div class="item-input-wrap">
                <input type="text" class="${i.target}"
                  placeholder="${i.symbol}"
                  @input="${(e) => convert(i,e.target.value) }"
                /><span class="input-clear-button"></span>
              </div>
            </div>
          </li>`)}
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default (_,{ $f7, $once }) => {
  const list = [
    { unit: 'kilogram', symbol: 'kg', factor: '1000' },
    { unit: 'pound', symbol: 'lb', factor: '453.59237' },
    { unit: 'ounce', symbol: 'oz', factor: '28.34952313' },
    { unit: 'slug', symbol: 'slug', factor: '14593.903' },
    { unit: 'stone', symbol: 'st', factor: '6350.29318' },
  ].map(i => Object.assign(i,{ target: $f7.utils.id('target-xxxxxx') }));

  const convert = (o,v) => {
    list.filter(i => i.unit != o.unit).forEach(i => {
      i.targetEl.val(v*o.factor/i.factor);
    });
  };

  $once('pageAfterIn',(e,p) => list.map(i => Object.assign(i,{
    targetEl: p.$pageEl.find('.'+i.target)
  })));

  return $render;
};
</script>
11

You are using event handlers in a wrong way

it must be:

<input
  id="inputPounds"
  class="w3-input w3-border"
  type="number" placeholder="Pounds"
  @input=${(e) => weightConverter(e.target.id,e.target.value)}
  @change=${(e) => weightConverter(e.target.id,e.target.value)}
>