CODEWITHSUNDEEP
javascript
Lesnie Sncheider
Lesnie Sncheider

Reputation: 375

Automatically calculate value on input using onkeyup

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

Upvotes: 0

Views: 240

Answers (2)

Nisheanthan
Nisheanthan

Reputation: 151

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.

Upvotes: 1

V.Volkov
V.Volkov

Reputation: 739

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

Upvotes: 0

Related Questions