如何更改 Javascript 中的 if 和 else 计算

Question

当我在值 1（旧）或 2（新）之间进行选择时，我现在的 javascript 代码

就像我选择值 1 表示旧，然后我将数字 5 放在筹码表中，它会像这样 5*5000 计算，对吗？

好的，我想改变的是

1. 旧的和新的对新的（最低 150）有旧的要求（最低 80）
2. 假设我现在选择旧的，那么最低要求是 80 对吗？因此，当我在筹码表中输入数字（我将输入 400）时，它将计算 400*5000，但如果我输入低于 80 的数字（如 50），则计算为 50*0。所以它类似于“（芯片
3. 对于新的类似这样的东西，我认为是“（芯片

所以问题是我不知道要在我的 javascript 中更改哪一个

对不起，如果我的解释不是很好，我只是不知道如何解释。 我还是 javascript 的新手，所以我真的不知道。再次对奇怪的解释感到抱歉。

<script text="javascript">
    function calc() {
        var tes = document.getElementById("beko").value;
        var chip = document.getElementById('chipping').value;
       if(tes == 1) {
           var result = 5000 * Number(chip);
       }
       else {
           var result = 6000 * Number(chip);
       }

        document.getElementById("result").value = result;


    }
</script>

我现在所拥有的甚至认为我在 var chip 中输入了 1 它仍然是 1*5000

我的预期是这样的

Beko type有新旧2个

旧 = 80

新 = 150

所以当我在芯片中输入数字时

像 300 一样，它会计算 300*5000，但如果我输入 50 或低于 80 的东西，它会计算 50*0，因为没有达到我声明要求为 80 的要求

新的要求是150，计算和旧的一样，只是要求不同

这是我的 HTML

<label>Beko Type</label>
     <select name="bekotype" required="required" id="beko">
      <option value="1">Old Beko</option>
      <option value="2">New Beko</option>
    </select>
	
	<label>Chipping</label>
    <input  type="text" name="chipping" id="chipping" maxlength="20" placeholder="old beko need 80 while new one need 150." required="required" onkeyup="calc()">

	<label>Result</label>
	  <input  type="text" name="result" maxlength="100" placeholder="Bonus result" required="required" id="result">

    <input type="submit" value="Save">

Answer 1

首先，关于您的 html 的建议：

• 保持标记最少且干净
• 尝试将尽可能多的样式和 javascript 放在外部文件中（或至少在文档正文之外。
• 如果输入需要纯数字值，请使用 type=number 输入 - 如果您想走这条路，它们甚至具有 min 和 max 属性。
• 计算结果字段不能由用户修改，逻辑上可以设为readonly。
• 除非您有理由使用 id 属性（例如用于样式设置），否则请忽略它们，因为您的表单提交将忽略它们。
• 您可能需要查看您的 maxlength 值。

这就是我的想法......

<form name="yourForm">
  <label>Beko Type</label>
  <select name="bekotype">
      <option value=1>Old Beko</option>
      <option value=2>New Beko</option>
  </select>

  <label>Chipping</label>
  <input type="number" name="chipping" maxlength="20" required>


  <label>Result</label>
  <input type="number" name="result" maxlength="100" required placeholder="bonus" readonly>

  <input type="submit" value="Save">
</form>

关于javascript：

• 当您需要多次使用任何东西时，请将其声明为某物。非常普遍，如果它永远不会改变，请设为const；如果可能发生变化，请使用let。
• 我几乎总是使用 jQuery 来简化脚本，但 javascript 也可以完成同样的工作。我将使用addEventListener() 声明事件侦听器，但有几种不同的方法。
• 我在 javascript 中将 chipping 的最小值作为查找数组/对象编写。这意味着我不必将其烘焙到 html 中。在 javascript 中编写所有数据和处理意味着您在进行修改时永远不必梳理 html。如果您实际上不想提交1 和2，可以省略值属性并在查找数组/对象中使用Old Beko 和New Beko。
• 当输入的chipping 值低于最小值时，我的自定义函数将返回空字符串。这样做是为了使表单提交失败（由于result 中的required 属性。
• keyup 事件是可以的，但它会在用户每次按下键时触发（即使该键不修改输入值）。此外，如果用户使用鼠标单击复制粘贴值，则不会触发该事件。我更喜欢使用input作为触发器，这样自定义函数只有在输入值被修改时才会执行。
• 我特意更新了minFactor 和芯片placeholder onload 和 bekotype 更改，以便它们始终正确。

这是我对 js 的看法：

function updateChipping() {
    minFactor = optionMinimums[beko.options[beko.selectedIndex].value];
    chipping.setAttribute('placeholder', 'Minimum value: ' + minFactor);
}

function calculateResult() {
    const chip = Number(chipping.value);
    result.value = chip >= minFactor ? chip * 5000 : '';
}

const form = document.yourForm,
      chipping = form.chipping,
      beko = form.bekotype,
      result = form.result,
      optionMinimums = {1:80, 2:150};

let minFactor;

updateChipping();
beko.addEventListener("change", updateChipping);
chipping.addEventListener("input", calculateResult);

这里是the jsfiddle demo。

Answer 2

你可以这样做：

function calc() {
  const beko = document.querySelector('#beko').value;
  let chipping = parseInt(document.querySelector('#chipping').value);
  if (chipping) {
    if ((beko === '1' && chipping >= 80) || (beko === '2' && chipping >= 150)) {
      chipping = chipping * 5000;
    } else {
      chipping = 0;
    }

    document.querySelector('#result').value = chipping;
  }
}

<label>Jenis Beko</label>
<select name="bekotype" required="required" id="beko" onchange="calc()">
  <option value="1">Old Beko</option>
  <option value="2">New Beko</option>
</select>


<label>Hasil Chipping</label>
<input type="text" name="chipping" id="chipping" maxlength="20" placeholder="old beko need 80 while new one need 150." required="required" onkeyup="calc()">

<label>Bonus dari hasil</label>
<input type="text" name="chipping" maxlength="100" placeholder="Bonus result" required="required" id="result">


<input type="submit" value="Save">