Javascript - 调用函数.oninput [英] Javascript - call function .oninput

问题描述

JSFIDDLE

HTML ：

 < input type =numberid =strScoreclass =attribScoremin = 8最大= 15  - ; 
< input type =numberid =strModclass =attribModreadonly =readonly> 
  

Javascript：

  / ************************************* *************************** 
 document.getElementById（strScore）。oninput =函数更新（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）; 
  

当左侧输入用能力得分更新时，正确的输入应该反映能力修正。
javascript的注释部分功能完全正常，但我真的宁愿没有为每个需要更新的输入单独设置功能 - 一种功能在将来更容易隔离和排除故障。我要做的是有一个函数，我可以将得分和修饰符输入值作为参数传递给参数（本例中为strScore和strMod），并让它通过.oninput更新修饰符字段事件。我在这方面的尝试低于javascript的评论部分。我觉得我只是没有连接点如何正确或正确地调用函数更新传递给函数的Modifier输入。

呼。从桌子上拉开了。这是您的解决方案。你只需要确保strscore被设置为一个id号。这样你就可以与你想要改变的strmod相关联。

Ex。 strScore1 = strMod1和strScore2 = strMod2

这将设置一个场景，您不必再触摸JavaScript来执行相同的功能未来。允许您在HTML部分中添加尽可能多的得分和对联。

我们绑定'input' .attributeScore 类中的$ c>事件，它允许我们设置该函数。没有必要传入值，因为它们默认已包含在内。只要分数输入有一个 .attributeScore 类，那么它将触发该函数。

我们可以使用 this.value 来获取分数值，然后将分数的标识（ 1 ）分为 strScore1 来自输入字段的 this.id 属性。如果我们用 #strMod 连接子字符串，我们可以更新相应的 strMod 属性和内联数学。

这里是jsfiddle： http://jsfiddle.net/hrofz8rg/

 <！DOCTYPE html> ; 
< html> 
< head> 
< title>一些JavaScript范例< / title> 
< / head> 
< body> 
< input type =numberid =strScore1class =attribScoremin = 8 max = 15> 
< input type =numberid =strMod1class =attribModreadonly =readonly> 
< br> 
< br> 
< input type =numberid =strScore2class =attribScoremin = 8 max = 15> 
< input type =numberid =strMod2class =attribModreadonly =readonly> 
 
<！ -  JavaScript  - > 
< script src =https://code.jquery.com/jquery-2.1.4.min.js>< / script> 
< script> 
 $（。attribScore）。bind（{$ b $'input'：function（）{
 var attrib_num = this.id.substring（8，this.length）; 
 $（'＃strMod'+ attrib_num）.val（（Math.floor（this.value / 2） -  5））; 
} 
}）; 
< / script> 
 
< / body> 
< / html> 
  

希望有所帮助！享受！

JSFIDDLE

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.

解决方案

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!

这篇关于Javascript - 调用函数.oninput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！