javascript - 如何在javascript中找到净工资的值？

Question

[在此处输入图片描述][1]

[1]：https ://i.stack.imgur.com/ztI16.png 图像中的变量 ns 出现问题并且没有给出所需的结果，请建议正确的书写方式。

标签： javascripthtmlcss

Answer 1

您发布的代码图像有一些问题：

• 不检查y是否为数字（输入允许字符串！）

• 我没有看到处理输入的代码（例如带有 ID a的输入）

因此，您的代码逻辑似乎有效，但有些小问题需要修复。

const salaryInput = document.getElementById("a")
salaryInput.addEventListener('input', function(e) {
  var x, y;

  x = document.getElementById("n").value;
  // checking whether y is a number - if not, treat it as 0
  y = isNaN(document.getElementById("a").value) ? 0 : Number(document.getElementById("a").value);

  var TA = 0.20 * y;
  var DA = 0.15 * y;
  var HRA = 0.50 * y;
  var PF = 0.20 * y;
  var NS = y + TA + DA + HRA + PF

  // rounding values with toFixed()
  document.getElementById("T").value = TA.toFixed(2)
  document.getElementById("D").value = DA.toFixed(2)
  document.getElementById("H").value = HRA.toFixed(2)
  document.getElementById("P").value = PF.toFixed(2)
  document.getElementById("NE").value = NS.toFixed(2)
})

<label for="n">NAME: <input id="n" type="text"></label><br />
<label for="a">BASIC SALARY: <input id="a" type="text"></label><br /><br />

<label for="T">TA: <input id="T" type="text" readonly></label><br />
<label for="D">DA: <input id="D" type="text" readonly></label><br />
<label for="H">HRA: <input id="H" type="text" readonly></label><br />
<label for="P">PF: <input id="P" type="text" readonly></label><br />
<label for="NE">NS: <input id="NE" type="text" readonly></label>

请注意，上面的代码片段绝不是“好代码”——我只是将其格式化为使用您可能会发现与您的代码相似的元素。请注意，我使用<label>而不是<span>包装输入字段。