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

【问题标题】：How would i create a price calculator with 1 input and 6 different outputs?我将如何创建一个具有 1 个输入和 6 个不同输出的价格计算器？
【发布时间】：2023-03-26 18:18:02
【问题描述】：

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

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

<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/

【问题讨论】：

给定的代码有什么不工作的地方吗？
不，我很确定代码可以工作——我只是不想单独为 6 个不同的输出输入输入，如果这有意义的话。
您尝试过什么来避免这种情况？你被困在哪里了？
我希望只有一个输入框可以更改所有输出 - 我将其创建为一个 html 计算器，来自我已经从 excel 制作的计算器

标签： html input output calculator

【解决方案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' />

【讨论】：

啊，我明白了，那我就添加其他 4 个不同的输出？
一个合理的解决方案。不过，如果我可以的话，有一个小细节 - 通过侦听一个键事件（键向上），您可以使输入无法使用鼠标粘贴值。侦听input 事件（oninput）意味着无论是鼠标交互还是提供值的键盘交互，您都会被调用。
感谢@enhzflep的建议，解决方案已更新
是的@Lewis 对所有其他字段都遵循相同的逻辑
@Lewis 如果此解决方案解决了您的问题，请接受答案。

【解决方案2】：

第一条建议是删除所有这些内联事件处理程序。附加一个命名函数，然后在其中完成所有繁琐的工作。通过使用 addEventListener 连接两者，函数“知道”它附加到哪个元素。也就是说，我们可以简单地使用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>

备用 sn-p

<!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>

【讨论】：

我怎么能在dreamweaver中使用它，每次我复制和粘贴它并尝试预览实时代码时什么都没有发生，它只是显示为文本而不是像在这个网站上运行代码，你知道为什么会这样吗？ @enhzflep
@Lewis - 如果您不知道，请注意，SO 上的可运行代码-sn-ps 似乎将 html、javascript 和 css 放在一起，在单个斑点。因此，您必须单独复制和粘贴这些部分。我将编辑我的答案以包含您会发现更熟悉的内容。
我看到了新的，非常感谢您的帮助。
@Lewis - 太棒了，很高兴我能提供帮助。 :)