我想用 javascript 实现一个预定义的公式

Question

I have a formula that I want to implement in JavaScript and 5 input fields.

Here is the HTML code: (sorry for the language, it is locale)

<div class="row" style="padding:10px 12px;">
                  <div class="row">          
                    <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                      <label class="control-label col-lg-6 col-md-6 col-sm-6" for="K">Shkolla e Mesme:</label>
                      <div class="controls">
                        <select name="K" class="span3 col-lg-6 col-md-6 col-sm-6 form-control1" id="K">
                          <option value="0">Zgjidh Shkollën e Mesme</option>
                          <option value="0" disabled="">---------------------------------------------------------</option>
                          <option value="1">GJIMNAZ</option><option value="2">GJIMNAZ ME KOHË TË SHKURTUAR</option><option value="3">SEKSION DY GJUHËSH SHQIP-FRËNGJISHT</option><option value="4">SEKSION DY GJUHËSH SHQIP-ITALISHT</option><option value="5">SEKSION DY GJUHËSH SHQIP-GJERMANISHT</option><option value="6">GJIMNAZ GJUHËSOR</option><option value="7">SHKOLLË ARTISTIKE/KOREOGRAFIKE</option><option value="8">SHKOLLË SPORTIVE</option><option value="9">SHKOLLË PEDAGOGJIKE</option><option value="10">HOTELERI-TURIZËM</option><option value="11">SHËRBIME MJETESH TRANSPORTI</option><option value="12">MEKANIKË</option><option value="13">ELEKTROTEKNIKË</option><option value="14">ELEKTRONIKË</option><option value="15">PËRPUNIM DRURI</option><option value="16">NDËRTIM</option><option value="17">TEKSTIL-KONFEKSIONE</option><option value="18">TEKNOLOGJI USHQIMORE</option><option value="19">BUJQËSI</option><option value="20">SHËRBIME SOCIALE DHE SHËNDETSORE</option><option value="21">VETERINARI</option><option value="22">GJEODEZI</option><option value="23">INSTALUES I SISTEMEVE TERMOHIDRAULIKE </option><option value="24">LLOGARI</option><option value="25">SHËRBIME BANKARE</option><option value="26">ADMINSITRIM BIZNESI </option><option value="27">RRJETE TË DHËNASH</option><option value="28">MBËSHTETJE E PËRDORUESVE TË TIK</option><option value="29">ELEKTRONIK NË TEKNOLOGJINË E AUTOMATIZIMIT </option><option value="30">SILVIKULTURË</option><option value="31">HARRY FULTZ, BIZNES</option><option value="32">HARRY FULTZ, ELEKTRONIKË</option><option value="33">HARRY FULTZ, AUTOMEKANIK</option><option value="34">PETER MAHRINGER TEKNOLOGJI INFORMACIONI</option><option value="35">PROFILI IM S'ËSHTË NË LISTË</option><option value="36">SHKOLLË PEDAGOGJIKE (TIK)</option>            </select>
                      </div>
                    </div>
                  </div>



                      <div class="row">
                        <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="M">Field1:</label>
                          <div class="controls"><input name="M" id="M" type="text" class="span1 form-control1" value="5.0" title="Nota mesatare e shkolles se mesme"></div>
                        </div>
                      </div>
                      <div class="row">
                        <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="D1">Field2:</label>
                          <div class="controls"><input name="D1" id="D1" type="text" class="span1 form-control1" value="5.0" title="Nota e provimit me detyrim 1"></div>
                        </div>
                      </div>
                      <div class="row">
                        <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="D2">Field3:</label>
                          <div class="controls"><input name="D2" id="D2" type="text" class="span1 form-control1" value="5.0" title="Nota e provimit me detyrim 2"></div>
                        </div>
                      </div>
                      <div class="row">
                        <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="D3">Field4:</label>
                          <div class="controls"><input name="D3" id="D3" type="text" class="span1 form-control1" value="5.0" title="Nota e provimit me detyrim 2"></div>
                        </div>
                      </div>

                      <div class="row">
                        <div style="display:flex; justify-content:space-between; fflex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="Z1">Field5:</label>
                        </div>
                      </div>

                      <div class="row">
                       <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                        <select name="Z1" class="span2 col-lg-6 col-md-6 col-sm-6 form-control1" id="Z1">
                          <option value="0">Zgjidh Lëndën</option>
                          <option value="0" disabled="">---------------------------------------------------------</option>
                          <option value="42">ADMINSITRIM BIZNESI </option><option value="51">Anglisht</option><option value="58">Anglisht, Gjuhë e huaj e dytë</option><option value="9">Biologji bërthamë</option><option value="10">Biologji e thelluar</option><option value="35">BUJQËSI</option><option value="15">Ekonomi bërthamë</option><option value="16">Ekonomi e thelluar</option><option value="45">ELEKTRONIK NË TEKNOLOGJINË E AUTOMATIZIMIT </option><option value="30">ELEKTRONIKË</option><option value="29">ELEKTROTEKNIKË</option><option value="21">Filozofi</option><option value="7">Fizikë bërthamë</option><option value="8">Fizikë e thelluar</option><option value="53">Frëngjisht</option><option value="60">Frengjisht, Gjuhë e huaj e dytë</option><option value="38">GJEODEZI</option><option value="13">Gjeografi bërthamë</option><option value="14">Gjeografi e thelluar</option><option value="54">Gjermanisht</option><option value="61">Gjermanisht, Gjuhë e huaj e dytë</option><option value="56">Greqisht</option><option value="63">Greqisht, Gjuhë e huaj e dytë</option><option value="49">HARRY FULTZ, AUTOMEKANIK</option><option value="47">HARRY FULTZ, BIZNES</option><option value="48">HARRY FULTZ, ELEKTRONIKË</option><option value="24">Histori arti</option><option value="25">Histori baleti</option><option value="11">Histori bërthamë</option><option value="12">Histori e thelluar</option><option value="23">Histori muzike</option><option value="26">HOTELERI-TURIZËM</option><option value="39">INSTALUES I SISTEMEVE TERMOHIDRAULIKE </option><option value="52">Italisht</option><option value="59">Italisht, Gjuhë e huaj e dytë</option><option value="5">Kimi bërthamë</option><option value="6">Kimi e thelluar</option><option value="3">Letërsi e thelluar</option><option value="40">LLOGARI</option><option value="4">Matematikë e thelluar</option><option value="44">MBËSHTETJE E PËRDORUESVE TË TIK</option><option value="28">MEKANIKË</option><option value="32">NDËRTIM</option><option value="31">PËRPUNIM DRURI</option><option value="50">PETER MAHRINGER TEKNOLOGJI INFORMACIONI</option><option value="20">Psikologji</option><option value="19">Qytetari</option><option value="43">RRJETE TË DHËNASH</option><option value="41">SHËRBIME BANKARE</option><option value="27">SHËRBIME MJETESH TRANSPORTI</option><option value="36">SHËRBIME SOCIALE DHE SHËNDETSORE</option><option value="46">SILVIKULTURË</option><option value="22">Sociologji</option><option value="55">Spanjisht</option><option value="62">Spanjisht, Gjuhë e huaj e dytë</option><option value="17">Teknologji bërthamë</option><option value="18">Teknologji e thelluar</option><option value="34">TEKNOLOGJI USHQIMORE</option><option value="33">TEKSTIL-KONFEKSIONE</option><option value="57">Turqisht</option><option value="64">Turqisht, Gjuhë e huaj e dytë</option><option value="37">VETERINARI</option>            </select>
                        <div class="controls"><input name="F1" id="F1" type="text" class="span1 form-control1" value="5.0" title="Nota e provimit me zgjedhje 1"></div>
                       </div>
                      </div>

                    <div class="row">
                        <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                          <label class="control-label col-lg-6 col-md-6 col-sm-6" for="Z2">Field6:</label>
                        </div>
                    </div>
                      <div class="row">
                       <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
                        <select name="Z2" class="span2 col-lg-6 col-md-6 col-sm-6 form-control1" id="Z2">
                          <option value="0">Zgjidh Lëndën</option>
                          <option value="0" disabled="">---------------------------------------------------------</option>
                          <option value="42">ADMINSITRIM BIZNESI </option><option value="51">Anglisht</option><option value="58">Anglisht, Gjuhë e huaj e dytë</option><option value="9">Biologji bërthamë</option><option value="10">Biologji e thelluar</option><option value="35">BUJQËSI</option><option value="15">Ekonomi bërthamë</option><option value="16">Ekonomi e thelluar</option><option value="45">ELEKTRONIK NË TEKNOLOGJINË E AUTOMATIZIMIT </option><option value="30">ELEKTRONIKË</option><option value="29">ELEKTROTEKNIKË</option><option value="21">Filozofi</option><option value="7">Fizikë bërthamë</option><option value="8">Fizikë e thelluar</option><option value="53">Frëngjisht</option><option value="60">Frengjisht, Gjuhë e huaj e dytë</option><option value="38">GJEODEZI</option><option value="13">Gjeografi bërthamë</option><option value="14">Gjeografi e thelluar</option><option value="54">Gjermanisht</option><option value="61">Gjermanisht, Gjuhë e huaj e dytë</option><option value="56">Greqisht</option><option value="63">Greqisht, Gjuhë e huaj e dytë</option><option value="49">HARRY FULTZ, AUTOMEKANIK</option><option value="47">HARRY FULTZ, BIZNES</option><option value="48">HARRY FULTZ, ELEKTRONIKË</option><option value="24">Histori arti</option><option value="25">Histori baleti</option><option value="11">Histori bërthamë</option><option value="12">Histori e thelluar</option><option value="23">Histori muzike</option><option value="26">HOTELERI-TURIZËM</option><option value="39">INSTALUES I SISTEMEVE TERMOHIDRAULIKE </option><option value="52">Italisht</option><option value="59">Italisht, Gjuhë e huaj e dytë</option><option value="5">Kimi bërthamë</option><option value="6">Kimi e thelluar</option><option value="3">Letërsi e thelluar</option><option value="40">LLOGARI</option><option value="4">Matematikë e thelluar</option><option value="44">MBËSHTETJE E PËRDORUESVE TË TIK</option><option value="28">MEKANIKË</option><option value="32">NDËRTIM</option><option value="31">PËRPUNIM DRURI</option><option value="50">PETER MAHRINGER TEKNOLOGJI INFORMACIONI</option><option value="20">Psikologji</option><option value="19">Qytetari</option><option value="43">RRJETE TË DHËNASH</option><option value="41">SHËRBIME BANKARE</option><option value="27">SHËRBIME MJETESH TRANSPORTI</option><option value="36">SHËRBIME SOCIALE DHE SHËNDETSORE</option><option value="46">SILVIKULTURË</option><option value="22">Sociologji</option><option value="55">Spanjisht</option><option value="62">Spanjisht, Gjuhë e huaj e dytë</option><option value="17">Teknologji bërthamë</option><option value="18">Teknologji e thelluar</option><option value="34">TEKNOLOGJI USHQIMORE</option><option value="33">TEKSTIL-KONFEKSIONE</option><option value="57">Turqisht</option><option value="64">Turqisht, Gjuhë e huaj e dytë</option><option value="37">VETERINARI</option>            </select>
                        <div class="controls"><input name="F2" id="F2" type="text" class="span1 form-control1" value="5.0" title="Nota e provimit me zgjedhje 2"></div>
                       </div>
                      </div>


                    </div>

Here is the formula:

{[26 x Field1 + 20 x Field2 + Field3 + Field4)] x 1.4 + 17 x (Field5 x 1.3 + Field6 x 1.2)} x 5

I found something here on stackoverflow but I could not modified it, I will show you that code maybe it can help:

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>


    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

    </script>

Thank you

Answer 1

what exactly ru trying to achieve?
Calculate the result of the formula based on the input fields and display it to the user? Should this happen on click, on submit, on blur?

I guess this is what ur after ...
working jsbin (forumla values not tested)

to simplify your code,

html:

<input id='field-1' type='number' placeholder="field-1" />
<input id='field-2' type='number' placeholder="field-2" />
<input id='field-3' type='number' placeholder="field-3" />
<input id='field-4' type='number' placeholder="field-4" />
<input id='field-5' type='number' placeholder="field-5" />
<input id='field-6' type='number' placeholder="field-6" />
<button onClick=onClick()>Calculate</button>

js:

function onClick () {
  const Field1 = Number(document.getElementById('field-1').value)
  const Field2 = Number(document.getElementById('field-2').value)
  const Field3 = Number(document.getElementById('field-3').value)
  const Field4 = Number(document.getElementById('field-4').value)
  const Field5 = Number(document.getElementById('field-5').value)
  const Field6 = Number(document.getElementById('field-6').value)
  const res = ((26 * Field1 + 20 * Field2 + Field3 + Field4) * 1.4 + 17 * (Field5 * 1.3 + Field6 * 1.2)) * 5
  alert('res is ' + res)
}

Answer 2

Get input field value for each of the field.

field1 = parseInt(document.getElementById('M').value); will get the value for the first field.

Get the total value as per your formula. var total= 5*((26 * field1 + 20 * field2 + field3 + field4) * 1.4 + 17 * (field5 * 1.3 + field6 * 1.2));

See the JSBin for the modified code .

function findTotal(){
var field1 = parseInt(document.getElementById('M').value);
var field2 = parseInt(document.getElementById('D1').value);
var field3 = parseInt(document.getElementById('D2').value);
var field4 = parseInt(document.getElementById('D3').value);
var field5 = parseInt(document.getElementById('F1').value);
var field6 = parseInt(document.getElementById('F2').value);

var total= 5*((26 * field1 + 20 * field2 + field3 + field4) * 1.4 + 17 * (field5 * 1.3 + field6 * 1.2));


document.getElementById('total').value = total;}