Call function .oninput

Question

HTML:

<input type="number" id="strScore" class="attribScore" min=8 max=15>
<input type="number" id="strMod" class="attribMod" readonly="readonly">

Javascript:

/****************************************************************
document.getElementById("strScore").oninput = function update(e) {
var result = document.getElementById("strMod");
var attribScore = $('#strScore').val();
result.value = (Math.floor((attribScore / 2) -5));
}
******************************************************************/
var strScore = $('#strScore').val();
var strMod = $('#strMod').val();
var update = function(score, mod) {
    attribMod = (Math.floor(score / 2) - 5);
    mod.value = attribMod;
};
update(strScore,strMod);

When the left input is updated with an ability score, the right input should reflect the ability modifier. The commented section of javascript is perfectly functional, but I would really rather not have a separate function for every input that needs to be updated like this - one function is far easier to isolate and troubleshoot in the future. What I'd like to do is have one function to which I can pass the score and modifier input values as arguments (strScore and strMod in this case) and have it update the modifier field via the .oninput event. My attempt at this is below the commented section of javascript. I feel like I'm just not connecting the dots on how to call the function appropriately or correctly update the Modifier input passed to the function.

For others who stumble upon this later: an unrelated query led me here: http://stackoverflow.com/questions/12797700/jquery-detect-change-in-input-field - more on the topic of binding events. — Nightglow, Nov 05 '15 at 22:03

score 0 · Answer 1 · answered Nov 05 '15 at 18:46

Modifying your function to accept to dom nodes rather than two values would allow you to reuse the function in separate events that use different dom nodes relatively easily.

/****************************************************************
document.getElementById("strScore").oninput = function update(e) {
var result = document.getElementById("strMod");
var attribScore = $('#strScore').val();
result.value = (Math.floor((attribScore / 2) -5));
}
******************************************************************/

var update = function($score, $mod) {
    var attribMod = (Math.floor($score.val() / 2) - 5);
    $mod.val(attribMod);
};

document.getElementById("strScore").oninput = function update(e) {
    var $score = $('#strScore');
    var $mod = $('#strMod');
    update($score, $mod);
};

Even better though would be able to dynamically figure out which mod element you should target based on which score element the event was triggered on, then you wouldn't need a separate function to do the calculation/update while keeping the code dry.

This is useful to remember. The solution as-written doesn't appear to work , but I do appreciate the thought process. — Nightglow, Nov 05 '15 at 20:53

Shannon Duncan · Accepted Answer · 2015-11-05T20:17:27.000

Phew. Got pulled away from the desk. Here is a solution for you. You just need to make sure that the strscore is set with an id number. This way you can relate to what strmod you want to change.

Ex. strScore1 = strMod1 and strScore2 = strMod2

This will setup a scenario where you don't have to touch anymore JavaScript to do this same function in the future. Allowing you to add as many score and mod couplets as you want in the HTML part.

We are binding the 'input' event on the class of .attributeScore which allows us to set the function. There is no need to pass in values because they are already included by default. As long as the score input has a class of .attributeScore, then it will fire that function.

We can use this.value to grab the score value, and then sub-string out the identity of the score aka 1 for strScore1 from the this.id attribute of the input field.

If we concatenate that sub-string with #strMod we can update the value of the corresponding strMod attribute with inline math.

Here is the jsfiddle: http://jsfiddle.net/hrofz8rg/

<!DOCTYPE html>
<html>
  <head>
    <title>Some JavaScript Example</title>
  </head>
  <body>
    <input type="number" id="strScore1" class="attribScore" min=8 max=15>
    <input type="number" id="strMod1" class="attribMod" readonly="readonly">
      <br>
      <br>
    <input type="number" id="strScore2" class="attribScore" min=8 max=15>
    <input type="number" id="strMod2" class="attribMod" readonly="readonly">

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>                
        $(".attribScore").bind({
            'input':function(){
                var attrib_num = this.id.substring(8,this.length);  
                $('#strMod' + attrib_num).val((Math.floor(this.value / 2) - 5));
            }
        });
    </script>

  </body>
</html>

Hope that helps! Enjoy!

`.bind` is what I was missing! Your specific method for coupling scores to modifiers is not really workable in my project (it is more likely that I would have score / mod pairs for str, dex, con and so forth as opposed to multiple sets for the same attribute), but I use the general method to map one or more resultant fields to the one input. My thanks! — Nightglow, Nov 05 '15 at 21:34
@Nightglow As long as it helped you move forward, that is what matters :) Glad I could help! — Shannon Duncan, Nov 05 '15 at 21:37

Call function .oninput

2 Answers2

Linked