执行除法的Javascript电池寿命计算器

Question

我一直在尝试使用Javascript和HTML编写一个简单的计算器。我对Javascript知之甚少，之后跟随一些教程来构建以下代码。我打算制作的计算器有两个字段（电池电流和负载电流）。我需要用电池电流除以负载电流乘以电流单位，当我点击计算或更改值时应显示结果值。

var current_unit = new Array();
current_unit["mA"] = 1000;
current_unit["A"] = 1;

function getbattunit() {
    var currentunit1 = 0;
    var theForm1 = document.forms[batterycalculator];
    var unit1 = theform.elements["currunit"];
    var Amps1 = current_unit[unit.value];
    return Amps1;
}

function getloadunit() {
    var currentunit2 = 0;
    var theForm2 = document.forms[batterycalculator];
    var unit2 = theform.elements["loadunit"];
    var Amps2 = current_unit[unit.value];
    return Amps2;

}

function runtime() {
    var currentunit = 0;
    var theForm = document.forms[batterycalculator];
    var temp = theform.elements["loadcurr"];
    var temp1 = the form.elemets["battcurr"];
    var time = (getbattunit() * battcurr) / (getloadunit() * loadcurr); 
     document.getElementById('timeresult').innerHTML =
        "Load can be powered for" + time;

    }

<form action="" id="batterycalculator" onsubmit="return false">
        <div>
            <div class="cont_order">
               <fieldset>
                <legend>Battery life calculator</legend>
                 <label for='loadcurr'>Load current</label>
                <input type="number" id="loadcurr" name='loadcurr' />
                 <select id="currunit" name='currunit' onchange="runtime()">
                <option value="A">A</option>
                <option value="mA">mA</option>
               </select>
                 <br/>
                <br/>
                 <label for='battcurr'>Battery maximum capacity</label>
                <input type="number" id="battcurr" name='battcurr' />
                <select id="loadunit" name='loadunit' onchange="runtime()">
                <option value="A">A</option>
                <option value="mA">mA</option>
               </select>
                 <br/>
                 <br/>
                 <div id="timeresult"> </div>                 
                 </br>
                 <button value='Submit' onclick="runtime()" />Calculate</button>
                 <br/>
                </fieldset>
          </div>
        </div>  
       </form>

Answer 1

“我的要求方式”

const bcForm = document.getElementById('battery-calculator')

bcForm.onsubmit=e=>
  {
  e.preventDefault()
  }
bcForm.btCalculate.onclick=()=>
  {
  let time = (Number(bcForm.currunit.value) * bcForm.loadcurr.valueAsNumber)
           / (Number(bcForm.loadunit.value) * bcForm.battcurr.valueAsNumber)
  bcForm.timeResult.textContent =  'Load can be powered for ' + time.toFixed(3)
  }   

fieldset, label, input, select, output, button { 
  display: block;
  float:   left;
  margin: .3em;
  }
label, button {
  clear: both;
  width: 15em;
  }
label {
  line-height: 2em;
  overflow:    hidden;
  white-space: nowrap;
  }
label::after {
  content: ' . . . . . . . . . . . . . . . . . . . '
  }
button, output {
  margin: 2em 3em 1em 1em;
  }

<form id="battery-calculator">
  <fieldset>
    <legend>Battery life calculator</legend>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0">
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0">
    <select name="loadunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
    <button name="btCalculate">Calculate</button>
    <output name="timeResult"></output>
  </fieldset>
</form>

Answer 2

随你便。但是有很多拼写错误。

var current_unit = {
  "mA": 1000,
  "A": 1
};

function getbattunit() {
    var currentunit1 = 0;
    var theForm1 = document.forms["batterycalculator"];
    var unit1 = theForm1.elements["currunit"].value;
    var Amps1 = current_unit[unit1];
    return Amps1;
}

function getloadunit() {
    var currentunit2 = 0;
    var theForm2 = document.forms["batterycalculator"];
    var unit2 = theForm2.elements["loadunit"].value;
    var Amps2 = current_unit[unit2];
    return Amps2;

}

function runtime() {
    var currentunit = 0;
    var theForm = document.forms["batterycalculator"];
    var temp = theForm.elements["loadcurr"].value;
    var temp1 = theForm.elements["battcurr"].value;
    var time = (getbattunit() * temp1) / (getloadunit() * temp);
    document.getElementById('timeresult').innerHTML = "Load can be powered for " + time;
}

<form action="" id="batterycalculator" onsubmit="return false">
        <div>
            <div class="cont_order">
               <fieldset>
                <legend>Battery life calculator</legend>
                 <label for='loadcurr'>Load current</label>
                <input type="number" id="loadcurr" name='loadcurr' />
                 <select id="currunit" name='currunit'>
                <option value="A">A</option>
                <option value="mA">mA</option>
               </select>
                 <br/>
                <br/>
                 <label for='battcurr'>Battery maximum capacity</label>
                <input type="number" id="battcurr" name='battcurr' />
                <select id="loadunit" name='loadunit'>
                <option value="A">A</option>
                <option value="mA">mA</option>
               </select>
                 <br/>
                 <br/>
                 <div id="timeresult"> </div>                 
                 </br>
                 <button value='Submit' onclick="runtime()" />Calculate</button>
                 <br/>
                </fieldset>
          </div>
        </div>  
       </form>