使用Javascript - 呼叫功能.oninput

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的評論部分。我覺得我只是沒有連接點如何適當地調用函數或正確地更新傳遞給函數的Modifier輸入。

來源

2015-11-05 Nightglow

我正在爲雅做一個完整的小提琴。 –

它被添加... –

對於其他誰後來偶然發現：一個無關的查詢帶領我在這裏：http：// stackoverflow。com/questions/12797700/jquery-detect-change-in-input-field - 關於綁定事件的更多內容。 – Nightglow

Phew。從桌子上拉開了。這是您的解決方案。你只需要確保strscore被設置爲一個id號。這樣你就可以和你想改變的strmod相關聯。

Ex. strScore1 = strMod1 and strScore2 = strMod2

，這將建立一個場景，你不必再觸及的JavaScript在將來這樣做相同的功能。允許您在HTML部分中添加儘可能多的得分和對聯。

我們正在綁定'input'事件的類.attributeScore它允許我們設置功能。沒有必要傳入值，因爲它們默認已包含在內。只要分數輸入有一類.attributeScore，那麼它將觸發該功能。

我們可以使用this.value搶分數值，然後子串比分超出又名1的身份strScore1從輸入字段的this.id屬性。

如果我們將該子串連接到#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>

希望幫助！請享用！

來源

2015-11-05 19:59:25

'.bind'就是我錯過的！ – Nightglow

'.bind'就是我錯過的！你的具體方法將分數耦合到修飾符在我的項目中並不真正有效（對於str，dex，con等，我更有可能有分數/ mod對，而不是相同屬性的多個集合），但是我使用常規方法將一個或多個結果字段映射到一個輸入。我的感謝！ – Nightglow

@Nightglow只要它幫助你前進，這是重要的:)很高興我能幫忙！ –

修改您的函數以接受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元素就應該將基於該樂譜要素的事件被觸發，那麼你就不會需要一個單獨的函數來完成計算/更新，而保持代碼乾燥。

來源

2015-11-05 18:46:28

這對記住很有用。寫成的解決方案似乎並不奏效，但我很欣賞思考過程。 – Nightglow

使用Javascript - 呼叫功能.oninput

回答

相關問題