HTML/JS - Не удается получить текстовое поле 3 для обновления после ввода текста в текстовое поле 1 + 2?

Question

Я ищу цифры, введенные в tbQtyFailed и tbQtyTested, рассчитать% курс, а затем показать% в tbFailurePercent. Я думал, что могу сделать функцию JS, а затем присвоить значение tbFailurePercents с результатами, но не могу заставить его работать, и я не уверен, почему. Я прикрепил код. Благодаря!

<td>Qty Tested:</td> 
<td> 
    <input type="text" id="tbQtyTested"> 
</td> 
</tr> 
<script type="text/javascript"> 
    function PercentageMath() { 
     var qtyTested = document.getElementById("tbQtyTested"); 
     var qtyFailed = document.getElementById("tbQtyFailed"); 
     var failurePercent = parseFloat(qtyTested.value)/parseFloat(qtyFailed.value); 

     var display = document.getElementById("tbFailurePercent"); 
     display.value = failurePercent; 
    } else { 
     document.getElementById("tbFailurePercent").value = "NAN"; 
    } 
    }; 
</script> 
<tr> 
    <td>Bag Number of Previous Test Period:</td> 
    <td> 
     <input type="text" id="tbPreviousPeriod"> 
    </td> 
    <td>Result(s):</td> 
    <td> 
     <input type="text" id="tbResults" value="" onchange="PercentageMath()"> 
    </td> 
</tr> 
<tr> 
    <td>Bag Numbers within Failure Scope:</td> 
    <td> 
     <input type="text" id="tbBagsWithinScope"> 
    </td> 
    <td>Failure % (Failed/Tested):</td> 
    <td> 
     <input type="text" id="tbFailurePercent" disabled> 
    </td> 
</tr> 

Answer 1

В вашем коде отсутствует поле для qty, и поле результата не имеет никакого смысла. Я понятия не имею, что такое мешочные поля.

function perc() { 
 
    var qtyT = document.getElementById("qtyT").value; 
 
    var qtyF = document.getElementById("qtyF").value; 
 
    var fRes = document.getElementById("failPerc"); 
 
    var pRes = document.getElementById("passPerc"); 
 
    var failPerc = parseFloat(qtyF)/parseFloat(qtyT); 
 
    //console.log('fail%: ' + failPerc); 
 
    var passPerc = parseFloat(1 - failPerc); 
 
    //console.log('pass%: ' + passPerc); 
 
    fRes.value = (failPerc * 100) + "%"; 
 
    pRes.value = (passPerc * 100) + "%"; 
 
};

<table> 
 
    <tbody> 
 

 
    <tr> 
 
     <td>Qty Tested:</td> 
 
     <td> 
 
     <input type="text" id="qtyT"> 
 
     </td> 
 
     <td>Qty Failed:</td> 
 
     <td> 
 
     <input type="text" id="qtyF" oninput="perc();"> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Bag#PrevTest:</td> 
 
     <td> 
 
     <input type="text" id="bagPrev"> 
 
     </td> 
 
     <td>Passed:</td> 
 
     <td> 
 
     <input type="text" id="passPerc" readonly> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bag#FailScope:</td> 
 
     <td> 
 
     <input type="text" id="bagFail"> 
 
     </td> 
 
     <td>Failed:</td> 
 
     <td> 
 
     <input type="text" id="failPerc" readonly> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>