onChangeイベントを持つ2つのテキストボックスの商を取得します

Question

私はuaとubの合計を得て、tuテキストボックスに表示します。私はua とgaテキストボックスを掛け合わせ、uuテキストボックスとub ang gbに表示しました。 uuとaの和を とし、ttテキストボックスに表示します。私はttとtuの商を にしてgpaのテキストボックスに表示したいが、それはうまくいかない。助けてください。 ありがとうございます。

function sum(){ 
 
    var ua = document.getElementById('ua').value; 
 
    var ub = document.getElementById('ub').value; 
 
    var result = parseInt(ua) + parseInt(ub); 
 
    if (!isNaN(result)) { 
 
    document.getElementById('tu').value = result; 
 
    document.getElementById('tu').dispatchEvent(new Event('change')); 
 
    } 
 
    } 
 
    function suma(){ 
 
    var ua = document.getElementById('ua').value; 
 
    var ga = document.getElementById('ga').value; 
 
    var result = parseInt(ua) * parseInt(ga); 
 
    if (!isNaN(result)) { 
 
    document.getElementById('uu').value = result; 
 
    document.getElementById('uu').dispatchEvent(new Event('change')); 
 
    } 
 
    } 
 
    function sumb(){ 
 
    var ub = document.getElementById('ub').value; 
 
    var gb = document.getElementById('gb').value; 
 
    var result = parseInt(ub) * parseInt(gb); 
 
    if (!isNaN(result)) { 
 
    document.getElementById('a').value = result; 
 
    document.getElementById('a').dispatchEvent(new Event('change')); 
 
    } 
 
    } 
 
    function s(){ 
 
    var uu = document.getElementById('uu').value; 
 
    var a = document.getElementById('a').value; 
 
    var result = parseInt(uu) + parseInt(a); 
 
    if (!isNaN(result)) { 
 
    document.getElementById('tt').value = result; 
 
    document.getElementById('tt').dispatchEvent(new Event('change')); 
 
    } 
 
    } 
 
    function g(){ 
 
    var tt = document.getElementById('tt').value; 
 
    var tu = document.getElementById('tu').value; 
 
    var result = parseFloat(tt)/parseFloat(tu); 
 
    if (!isNaN(result)) { 
 
    document.getElementById('gpa').value = result; 
 
    } 
 
    } 
 

 

 

<input type="text" id="ua" name="ua" size="7" onkeyup="sum();"> 
 
    <input type="text" id="ga" name="ga" size="7" onkeyup="suma();"> 
 
    <input type="text" id="uu" name="uu" size="7" onchange="s();"/> 
 

 
    <input type="text" id="ub" name="ub" size="7" onkeyup="sum();"> 
 
    <input type="text" id="ga" name="ga" size="7" onkeyup="sumb();"> 
 
    <input type="text" id="a" name="a" size="7" onchange="s();"/> 
 

 
    <input type="text" id="tu" name="tu" onchange="g();"/> 
 
    <input type="text" id="tt" name="tt" onchange="g();"/> 
 

 
    <label>GPA</label> 
 
    <input type="text" id="gpa" />

Answer 1

限り、あなたが機能 sumbにID gbを持つ要素を取得したいことを除いて、私は、（あなたの編集後に）あなたのコードの作品のすべてを伝えることができるよう

が、要素が存在しません。今のコードでは、tt（HTMLの2番目）の値をtu（HTMLの最初の値）で割った値を表示します。

しかし、「は動作していません。」と言ったときの意味はわかりません。私が考えることができるのは、の代わりにonchangeを使用したため、gpa要素に結果が表示されるように、tuまたはtt入力要素からフォーカスを外さなければならないことだけです。

他の人が指摘しているように、私も強調したいことは、変数を与えることを試みるべきであるということです。意味のある名前。 3年後にあなたのコードを見ると、あなたはまだ "gpa"と "uu"が何であるか知っていると思いますか？

次のスニペットでは、除算に関連する<input>がコピーされました。私の代わりに、インラインイベントリスナー（onkeyup="sumb();"）のaddEventListenerを使用し、それをより読みやすく：

var dividendElement = document.getElementById('dividend'); 
 
var divisorElement = document.getElementById('divisor'); 
 
var resultElement = document.getElementById('result'); 
 

 
function updateQuotient() { 
 
    var result = parseFloat(dividendElement.value)/parseFloat(divisorElement.value); 
 
    if (!isNaN(result)) { 
 
    resultElement.value = result; 
 
    } 
 
} 
 

 
dividendElement.addEventListener('keyup', updateQuotient); 
 
divisorElement.addEventListener('keyup', updateQuotient);

<input type="text" id="dividend"> 
 
/
 
<input type="text" id="divisor"> <!-- <input> elements don't need a closing tag! --> 
 
= 
 
<input type="text" id="result">