我将如何创建具有 1 个输入和 6 个不同输出的价格计算器？

Question

我已经创建了一个初始版本，但是您必须为每个输出键入单独的输入。我希望能够只在一个输入框中输入内容，然后它会计算所有其他输出。我该怎么做？

这是我目前拥有的代码，我对此非常陌生:)

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber /0.7).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="RETAIL"></output> Retail


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber *1).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Schools & CDC's"></output> Schools & CDC's


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*40)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band A" Math.round></output> Trade - Band A


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber *1).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band B"></output> Trade - Band B


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*20)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band C" Math.round></output> Trade - Band C


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*10)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band D" Math.round></output> Trade - Band D


</form>

https://jsfiddle.net/5gpLbj80/2/

Answer 1

您可以使用相同的输入来更新所有字段，无需使用表单。

const calc = () => {
  let nhs = document.getElementById('nhs').value;
  document.getElementById('retail').innerHTML = (nhs / 0.7).toFixed(0);
  document.getElementById('school').innerHTML = (nhs * 1).toFixed(0);
  //If you want an input:
  document.getElementById('retailInput').value = (nhs / 0.7).toFixed(0);
  document.getElementById('schoolInput').value = (nhs * 1).toFixed(0);

}

NHS<input id='nhs' oninput='calc()'><br>
<span>Retail:</span><span id='retail'></span><br>
<span>School:</span><span id='school'></span><br>
<span>Retail input:</span><input id='retailInput' disabled='true' /><br>
<span>Retail input:</span><input id='schoolInput' disabled='true' />

Answer 2

第一个建议是删除所有这些内联事件处理程序。附加一个命名函数，然后在其中完成所有繁重的工作。通过使用 addEventListener 连接两者，函数 'knows' 它附加到哪个元素。也就是说，我们可以简单地使用 this.value 来获取它的值，而不必使用 document.getElementById('nhs').value

"use strict;"
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
  let input = byId('myInput');
  input.addEventListener('input', onInputReceived, false);
}

function onInputReceived(evt)
{
  let outputs = [byId('output1'), byId('output2'), byId('output3')];
  let value = parseFloat(this.value);
  if (!isNaN(value))
  {
    outputs[0].textContent = value * 2;
    outputs[1].textContent = value * 3;
    outputs[2].textContent = parseInt( (value * 3)/4 );
  }
  else
  {
    outputs[0].textContent = 
    outputs[1].textContent = 
    outputs[2].textContent = "*invalid input (enter a number)*";
  }
}

<label>Enter data: <input id='myInput'/></label><br>
<ul>
  <li id='output1'></li>
  <li id='output2'></li>
  <li id='output3'></li>
</ul>

备用代码段

<!doctype html>
<html>
<head>
<script>
"use strict;"
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
  let input = byId('myInput');
  input.addEventListener('input', onInputReceived, false);
}

function onInputReceived(evt)
{
  let outputs = [byId('output1'), byId('output2'), byId('output3')];
  let value = parseFloat(this.value);
  if (!isNaN(value))
  {
    outputs[0].textContent = value * 2;
    outputs[1].textContent = value * 3;
    outputs[2].textContent = parseInt( (value * 3)/4 );
  }
  else
  {
    outputs[0].textContent = 
    outputs[1].textContent = 
    outputs[2].textContent = "*invalid input (enter a number)*";
  }
}
</script>
</head>
<body>
    <label>Enter data: <input id='myInput'/></label><br>
    <ul>
      <li id='output1'></li>
      <li id='output2'></li>
      <li id='output3'></li>
    </ul>
</body>
</html>

我将如何创建具有 1 个输入和 6 个不同输出的价格计算器？

How would i create a price calculator with 1 input and 6 different outputs?

html

input

output

calculator

备用代码段