Automatically calculate value on input using onkeyup

Question

I have some code that calculates the amount of frames based on some users input. I can get this to work when I input the data manually into the function, but I would like this to be calculated automatically via "onkeyup" on the input field, so I changed the code a little to do that, but it doesn't work. It throws the exception

Uncaught TypeError: Cannot read property 'split' of undefined
    at processChunk (0eaace3b-4b4c-4c76-93c5-8e8921ae247c:309)
    at HTMLInputElement.onkeyup (0eaace3b-4b4c-4c76-93c5-8e8921ae247c:213)

Script that has the issue.

    var input = document.getElementById("id_desiredFrames").value;  
    var totFrames = 0;

    var chunk = input.split(";")
    chunk.forEach(processChunk);

    document.getElementById("TotalFrames").value = totFrames

    function processChunk(chunk) {
      var stepInfo = chunk.split(",");
      var step = 1;
      if(stepInfo.length > 1)
        step = stepInfo[1];

      var range = stepInfo[0].split("-");
      var frame = Math.round((range[1]- range[0]+ 1) / step);
      totFrames += frame;
    }

Script that works but with manual input data:

var input = "1-4; 10-20,2"
var totFrames = 0;

var chunk = input.split(";")
chunk.forEach(processChunk);

console.log(totFrames);

function processChunk(chunk) {
  var stepInfo = chunk.split(",");
  var step = 1;
  if(stepInfo.length > 1)
    step = stepInfo[1];

  var range = stepInfo[0].split("-");
  var frame = Math.round((range[1]- range[0]+ 1) / step);
  totFrames += frame;
}

id_desiredFrames is the input field on my form. TotalFrames is a hidden field I would like the value to be passed on to, so I can get the value when the user POST

var input = document.getElementById("id_desiredFrames").value; is executed only when the page is loaded. so there are no value on page load. so you can call a function on change of input to get the value. — Nisheanthan
– Nisheanthan, Commented Dec 25, 2019 at 16:53
Also, it doesn't fix your problem, but there is onchange eventlistener, which can track the changes in input field. — V.Volkov
– V.Volkov, Commented Dec 25, 2019 at 17:18
@Nisheanthan Ohhh, got it. I'm just not sure how to turn it into a function as a whole. — Lesnie Sncheider
– Lesnie Sncheider, Commented Dec 25, 2019 at 17:29
@LesnieSncheider I'm posting my suggestion as an answer, please have a check on that. — Nisheanthan
– Nisheanthan, Commented Dec 25, 2019 at 17:50

Nisheanthan · Accepted Answer · 2019-12-25 18:10:51Z

1

I would suggest to call an onchange/onkeyup event to get the value of input field

HTML,

<input onkeyup="check()" id="id_desiredFrames"> </input>

JS,

var totFrames = 0;

function check() {
  var input = document.getElementById("id_desiredFrames").value;  
  var chunk = input.split(";")
  chunk.forEach(processChunk);

  document.getElementById("TotalFrames").value = totFrames
}

function processChunk(chunk) {
  var stepInfo = chunk.split(",");
  var step = 1;
  if(stepInfo.length > 1)
    step = stepInfo[1];

  var range = stepInfo[0].split("-");
  var frame = Math.round((range[1]- range[0]+ 1) / step);
  totFrames += frame;
}

hope this is what you are looking for.

edited Dec 25, 2019 at 18:10

answered Dec 25, 2019 at 17:49

Nisheanthan

1511 gold badge1 silver badge10 bronze badges

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

8 Comments

Lesnie Sncheider Over a year ago

When I type into the input field nothing seems to get calculated. The value of TotalFrames is just none. I tried changing onchange to onkeyup and that just returns the value NaN when inputting the data onto the input field

Nisheanthan Over a year ago

Can you share any stackblitz code snippets, so I can figure out exactly where are we getting the problem.

Lesnie Sncheider Over a year ago

Here you go. codesandbox.io/s/… I dont use Angular and stuff like stackblitz use, so I just found something else. Hopes thats ok

Lesnie Sncheider Over a year ago

Ah I noticed it assigns the value when you press enter on the input field, but the calculations are wrong now.

Nisheanthan Over a year ago

yeah, i see that issue. can you check the same link now.

|

V.Volkov · Accepted Answer · 2019-12-25 16:45:06Z

0

It is about chunk or stepInfo[0], isn' it? I'd suggest to add a few conditions before function execution - that way it will ~ignore incorrect input at least:

function processChunk(chunk) {
  if (!chunk || chunk.indexOf(',') == -1)
    return;
  var stepInfo = chunk.split(",");
  var step = 1;
  if(stepInfo.length > 1)
    step = stepInfo[1];
  
  if (!stepInfo[0] || stepInfo[0].indexOf('-') == -1)
    return;
  var range = stepInfo[0].split("-");
  var frame = Math.round((range[1]- range[0]+ 1) / step);
  totFrames += frame;
}

answered Dec 25, 2019 at 16:45

V.Volkov

7393 silver badges13 bronze badges

2 Comments

Lesnie Sncheider Over a year ago

Oh sorry , the full exception is

Uncaught TypeError: Cannot read property 'split' of undefined     at processChunk (0eaace3b-4b4c-4c76-93c5-8e8921ae247c:309)     at HTMLInputElement.onkeyup (0eaace3b-4b4c-4c76-93c5-8e8921ae247c:213)

. I tried pasting your function in instead of mine and now it just returns the value 0.

V.Volkov Over a year ago

Try removing the first or second return and condition before it to find out which split throws the error :)

Collectives™ on Stack Overflow

Automatically calculate value on input using onkeyup

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related