Javascript & HTML 单位转换器 - 如何使用一个输入字段作为常量

Question

我正在尝试将 Python 脚本转换为基于 HTML/Javascript Web 的转换器。该脚本非常简单，我按照https://www.w3schools.com/howto/howto_js_length_converter.asp上的步骤进行操作，如果所有字段都是动态的，那么效果很好。就我而言，我需要一个变量不改变。例如：用户提供“AssayWeight”值和以下之一：PPM 或 Grav。之后，脚本会根据 PPM/Grav 计算用户未提供的其他值。这是我到目前为止的代码：<script>function ppmtoGravConverter(source,valNum) {  valNum = parseFloat(valNum);  var inputPPMtoGrav = document.getElementById("inputPPMtoGrav");  var inputAssayWeight = document.getElementById("inputAssayWeight");  var inputGravtoPPM = document.getElementById("inputGravtoPPM");  if (source=="inputPPMtoGrav") {    inputGravtoPPM.value=(valNum*inputAssayWeight/1000).toFixed(4);  }  if (source=="inputGravtoPPM") {    inputPPMtoGrav.value=(valNum*1000/inputAssayWeight).toFixed(4);  }}</script>和来自 w3schools 的 html：<label>Assay Weight</label><input id="inputAssayWeight" type="number" placeholder="Assay Weight" oninput="ppmtoGravConverter(this.id,this.value)" onchange="ppmtoGravConverter(this.id,this.value)"><br><br><label>PPM</label><input id="inputPPMtoGrav" type="number" placeholder="PPM" oninput="ppmtoGravConverter(this.id,this.value)" onchange="ppmtoGravConverter(this.id,this.value)"><label>Grav (mg)</label><input id="inputGravtoPPM" type="number" placeholder="Grav (mg)" oninput="ppmtoGravConverter(this.id,this.value)" onchange="ppmtoGravConverter(this.id,this.value)">请让我知道我错过了什么。这是我看 Javascript 的第二天。谢谢！

Answer 1

问题是在您的公式中，您正在使用inputAssayWeight而不是实际获取它的值并使用它。将这两个if条件替换为

  if (source=="inputPPMtoGrav") {

    inputGravtoPPM.value=(valNum*parseFloat(inputAssayWeight.value)/1000).toFixed(4);

  }

  if (source=="inputGravtoPPM") {

    inputPPMtoGrav.value=(valNum*1000/parseFloat(inputAssayWeight.value)).toFixed(4);

  }

那应该可以解决您的问题。

Answer 2

将所有内容包装在<form>标签中并给它一个#id。

<form id='main'><!-- EVERYTHING --></form>

将事件绑定"input"到<form>并调用事件处理程序（即处理触发事件的函数）。参考：JavaScript 事件处理

document.forms.main.oninput = inputHandler;

定义function inputHandler()——记得传递事件对象

function inputHandler(event) {...

定义所有变量——参考：在 JavaScript 中获取表单和表单元素的引用

// Collect all form controls into a NodeList

const field = this.elements;

// Find the element user interacted with

const input = event.target;

// Reference any form control by #id or [name] attribute by prefixing it with `field`

const aW = field.assayWeight;

// Assign a variable to form control values and convert them into a real Number

let AWT = parseFloat(aW.value);

"input"使用if/else流控制语句委托事件。通过明确地允许特定元素对事件做出反应并通过简单的省略来隐式地阻止其他元素是称为事件委托的编程范例的重要部分。

 if (input.matches('#assayWeight')) {...

HTML/CSS 布局和样式具有一个切换系统，它允许用户输入“测定重量”和“PPM”或“Grav”。将鼠标悬停在标题上，然后单击一个，然后单击另一个以查看切换。请参阅：通过选中的单选按钮公开表单字段

 [name=conv],

 .mask {

   display: none

 }

 [name=conv]:checked + fieldset .mask {

   display: inline-block;

 }

演示

document.forms.convPpmG.oninput = convert;

function convert(event) {

  const field = this.elements;

  const input = event.target;

  const awt = field.aWt;

  const ppm = field.pPM;

  const grv = field.grv;

  const gtp = field.gToP;

  const ptg = field.pToG;

  let AWT = parseFloat(awt.value);

  let PPMin = parseFloat(ppm.value);

  let GRVin = parseFloat(grv.value);

  if (input.matches('#aWt')) {

    // log(AWT, "Assay Weight");

  }

  if (input.matches('#pPM')) {

    // log(PPMin, "PPM Input");

    let GRVout = PPMin * AWT / 1000;

    // log(GRVout, "Grav Output");

    ptg.value = GRVout.toFixed(4);

  }

  if (input.matches('#grv')) {

    // log(GRVin, "Grav Input");

    let PPMout = GRVin * 1000 / AWT;

    // log(PPMout, "PPM Output");

    gtp.value = PPMout.toFixed(4);

  }

}

// A utility logger - not required

const log = (data, key = 'Field') => console.log(JSON.stringify(key + ': ' + data));

root,

body {

  font: 400 3vw/1.5 Consolas, monospace;

}

fieldset fieldset {

  min-height: 20vh;

}

input,

output {

  width: 10ch;

  margin-right: 5px;

  margin-bottom: 8px;

  font: inherit;

  text-align: right;

}

#aWt {

  display: inline-block;

}

[type=reset] {

  text-align: center;

}

.switch {

  padding: 3px 5px;

}

[type=reset]:hover,

.switch:hover {

  color: tomato;

  background: rgba(56, 87, 199, 0.4);

  cursor: pointer;

}

[name=conv],

.mask {

  display: none

}

[name=conv]:checked+fieldset .mask {

  display: inline-block;

}

<form id='convPpmG'>

  <fieldset>

    <legend>PPM / Grav Convertor</legend>

    <label>Assay Weight</label>

    <input id="aWt" type="number" min='0' value="0">

    <input type='reset'>

    <br>

    <input id='ppmToGrav' name='conv' type='radio'>

    <fieldset>

      <legend>

        <label for='ppmToGrav' class='switch'>PPM to Grav</label>

      </legend>

      <label class='mask'>

      PPM: <input id="pPM" type="number" min='0' value="0">

      to Grav: <output id='pToG'>0</output> mg

      </label>

    </fieldset>

    <hr>

    <input id='gravToPPM' name='conv' type='radio'>

    <fieldset>

      <legend>

        <label for='gravToPPM' class='switch'>Grav to PPM</label>

      </legend>

      <label class='mask'>

      Grav: <input id="grv" type="number" min='0' value="0">

      mg to PPM: <output id='gToP'>0</output>

      </label>

    </fieldset>

  </fieldset>

</form>