Javascript

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

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

Answer 1

修改您的函数以接受 dom 个节点而不是两个值，这样您就可以相对轻松地在使用不同 dom 个节点的单独事件中重用该函数。

/****************************************************************
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);
};

更好的是，如果能够根据触发事件的分数元素动态地找出您应该定位哪个 mod 元素，那么您就不需要单独的函数来执行 calculation/update 同时保持代码干燥。

Answer 2

呸。被拉离办公桌。这是适合您的解决方案。您只需要确保为 strscore 设置了一个 ID 号。这样您就可以关联到您想要更改的 strmod。

Ex. strScore1 = strMod1 and strScore2 = strMod2

这将设置一个场景，您以后无需再触摸 JavaScript 即可执行相同的功能。允许您在 HTML 部分添加任意数量的乐谱和 mod 对句。

我们正在 .attributeScore 的 class 上绑定 'input' 事件，这样我们就可以设置函数。不需要传入值，因为它们已经默认包含在内。只要分数输入的 class 为 .attributeScore，它就会触发该函数。

我们可以使用this.value来获取分值，然后从this.id属性中子串出分值的标识，即1 for strScore1的输入字段。

如果我们将该子字符串与 #strMod 连接起来，我们可以使用内联数学更新相应 strMod 属性的值。

这是 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>

希望对您有所帮助！享受吧！

Javascript - 调用函数 .oninput

Javascript - call function .oninput

html

jquery

javascript-events