イベントで計算された値を上書きする

Question

編集：それぞれの出力フィールドに結果を表示する数学的関数を計算するいくつかの形式があります。私の問題は、時には、私は値を計算結果をオーバーライドする必要があります。

f4の計算値が40の場合は、代わりに33.5を表示したいと思います。

どうすればこの問題を解決できますか？ここで

は、私がこれまで持っているものです。

<form onsubmit="return false" onclick="f4.value= (parseFloat(4)*parseFloat(c.value)) "> 

<input id="c" name="c" value="10" type="radio"> 
    10 
<input id="f4"> 

とJavaScriptについて：

function writeF4() { 

if (f4==40) {document.getElementById("f4").value = 33.5;} 
} 

document.getElementById("c").addEventListener('click', writeF4); 

私が想定し、私もF4のための40を持っているので、これは動作しない理由は、 33.5。

この問題を回避するにはどうすればよいですか？

Answer 1

適用する関数は、2つの入力：tとcを受け取り、4つの出力f1, f2, f3, f4を生成します。関数の内部では、特殊なケースがいくつかあります。これは、値をチェックして2番目のステップに置き換えることで処理できます。

このコードではなく、パフォーマンスや簡潔にするために、ステップバイステップの読みやすさのために最適化されているが、それは仕事をして（と思う）かなり明確である必要があります。

フィドル：https://jsfiddle.net/4L6mf0kk/

HTML：

<table id="input-options"> 
    <thead> 
    <tr> 
     <th>T</th> 
     <th>C</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input id="t1" name="t" type="radio" value="9.58333" checked="true" /><label for="t1">t1</label></td> 
     <td><input id="c1" name="c" type="radio" value="12" checked="true"/><label for="c1">12</label></td> 
    </tr> 
    <tr> 
     <td><input id="t2" name="t" type="radio" value="7.50" /><label for="t2">t2</label></td> 
     <td><input id="c2" name="c" type="radio" value="24" /><label for="c2">24</label></td> 
    </tr> 
    </tbody> 
</table> 

<dl id="output-values"> 
    <dt>f1:</dt> 
    <dd id="f1-value"></dd> 
    <dt>f2:</dt> 
    <dd id="f2-value"></dd> 
    <dt>f3:</dt> 
    <dd id="f3-value"></dd> 
    <dt>f4:</dt> 
    <dd id="f4-value"></dd> 
</dl> 

Javascriptを：

// ------------------------------------------------------ 
// 1: Collect up our input and output elements 

var inputs = document.querySelectorAll('#input-options input'), 
    outputs = { 
     f1: document.querySelectorAll('#f1-value')[0], 
     f2: document.querySelectorAll('#f2-value')[0], 
     f3: document.querySelectorAll('#f3-value')[0], 
     f4: document.querySelectorAll('#f4-value')[0]  
    }; 

// ------------------------------------------------------ 
// 2: Calculate function 
// This takes two input numbers and returns an object with 4 values 

var calculate = function(t, c) { 
    //These are the modifiers that we use on each return value: 
    var modifiers = { 
    f1: 240, 
    f2: 525, 
    f3: 570, 
    f4: 390 
    }, 
    results = {}; //This object collects the results of the calculation 

    //Do each of the calculations on your values: 
    Object.keys(modifiers).forEach(function(key) { 
    results[key] = Math.round((t + modifiers[key]/c)*100)/100; 
    }); 

    //Now, specify any 'special' override rules 
    if (results['f4'] == 40) {results['f4'] = 33.5} //If f4 equals 40, switch it to 33.5 instead 

    //Pass back the result object 
    return results; 
} 

// ------------------------------------------------------ 
// 3: Update Function 
// Update the DOM with the output of the calculation, based on the currently selected options 

var update = function() { 
    //Collect the selected values: 
    var t = parseFloat(document.querySelectorAll('#input-options input[name=t]:checked')[0].value), 
     c = parseFloat(document.querySelectorAll('#input-options input[name=c]:checked')[0].value); 

    //Grab the results of the calculation: 
    var values = calculate(t, c); 

    //Apply them to the output elements: 
    Object.keys(values).forEach(function(key) { 
    outputs[key].innerHTML = values[key]; 
    }); 
} 

// ------------------------------------------------------ 
// 4: Assign an event listener to each input so it calls the update function when changed 

for (var i = 0; i < inputs.length; i++) { 
    inputs[i].addEventListener('change', update); 
} 

一つpatteここでは、値を表示する値、結果、およびHTML要素を扱っているところで、いつでもハッシュを使用しています。f1, f2, f3, f4そうすれば、ハッシュをループすることができ、結果ハッシュのf1が出力要素ハッシュのf1に挿入できることがわかります。また、計算を他の値で拡張する必要がある場合は、明確かつ容易になります。

私はあなたの特別な規則をすべて考慮していないことを知っていますが、うまくいけばそれをどのように含めて拡張するのかは明らかです。