Question

我正在尝试使用Javascript计算。

我想知道正值的总数和负值的总数。

当我仅使用一个文本框时，该脚本有效。

如果第一个文本框的值为正，则脚本会将值发布到文本框“ positive”中。如果第二个文本框的值为负，则脚本会将所有值发布到文本框“负”中。

示例：

第一个文本框： 50 + 第二个文本框： 50-

总计+：（空）

总计-： 100

我想要的是以下内容：第一个文本框： 50 + 第二个文本框： 50-

总计+： 50

总计-： 50

我正在使用以下脚本

HTML：

Price 1:<br />
<input type="text" id="p1" name="p[]">
<select id="pn1" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 2:<br />
<input type="text" id="p2" name="p[]">
<select id="pn2" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 3:<br />
<input type="text" id="p3" name="p[]">
<select id="pn3" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br /><br />
Total +:<br />
<input type="text" id="positive" name="positive">
<br />
Total -:<br />
<input type="text" id="negative" name="negative">
<br />

Javascript：

<script>
$(document).on('change', '[name^=pn]', function selectQuantity(selectedValue){
  var e = document.getElementsByName('pn[]');
  var quantity = e.options[e.selectedIndex].value;

  if ( quantity==='0') {
    document.getElementById('positive').value = "";
    document.getElementById('negative').value = "";

  } else if ( quantity==='1') {
    document.getElementById('positive').value = "";
    document.getElementById('negative').value = "";
    var numVal1 = Number(document.getElementsByName("p[]").value);
      var totalValue1 = numVal1
      let total = 0;
      for(const el of document.getElementsByName("p[]"))
      total += +el.value;
      document.getElementById("positive").value = total.toFixed(2);

  } else { 
    document.getElementById("positive").value = "";
    document.getElementById("negative").value = "";
    var numVal2 = Number(document.getElementsByName("p[]").value);
      var totalValue2 = numVal2
      let total = 0;
      for(const el of document.getElementsByName("p[]"))
      total += +el.value;
      document.getElementById("positive").value = total.toFixed(2);
  }
});
</script>

有人知道为什么我的脚本不能正常工作吗？

Answer 1

这会编码混乱的拼写和不良的组织，这可能就是您想要的：

$('[name^=pn]').on('change', function() {
	let neg = 0
	let pos = 0

	$('[name^=pn]').each( function( i, e) {
		var quantity = e.options[e.selectedIndex].value;

		if ( quantity==='0') {

		} else if ( quantity==='1') {
			var num = Number( document.getElementById( $(this).data('target')).value);
			pos += num;

		} else {
			var num = Number(this.value);
			neg += num;

		}

	});

	document.getElementById('positive').value = pos;
	document.getElementById('negative').value = neg;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Price 1:<br />
<input type="text" id="p1" name="p[]">
<select id="pn1" name="pn[]" data-target="p1">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 2:<br />
<input type="text" id="p2" name="p[]">
<select id="pn2" name="pn[]" data-target="p2">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 3:<br />
<input type="text" id="p3" name="p[]">
<select id="pn3" name="pn[]" data-target="p3">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br /><br />
Total +:<br />
<input type="text" id="positive" name="positive">
<br />
Total -:<br />
<input type="text" id="negative" name="negative">
<br />

Answer 2

以下是使用香草JS的答案。我注释了JS代码，因此您可以看到我在每个步骤中所做的事情。通过更改输入的类型为“数字”而不是“文本”，我也更改了HTML。这样，您就不会让用户无意间在框中输入字母。以后使错误检查变得容易一些。我还更改了将总计显示为段落而不是文本框的位置，以便用户无法在其中输入任何内容。通常，除非用户应该在此处输入内容，否则我不喜欢使用输入。

//declare shortcuts
const inputs = document.getElementsByTagName("input");
const selects = document.getElementsByTagName("select");
const ipr = "p";
const spr = "pn";
//loop through and add event listeners to all text boxes and dropdowns
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("input", Compute)
}
for (var i = 0; i < selects.length; i++) {
  selects[i].addEventListener("change", Compute)
}
function Compute() {
  //set total positive and negative to zero
  let pos = 0;
  let neg = 0;
  //loop through each text box-dropdown combo
  for (var i = 1; i < 4; i++) {
    //determine if sign is positive or negative and add or subtract accordingly
    switch (document.getElementById(spr + i).value) {
      case "1":
        pos = pos + Number(document.getElementById(ipr + i).value);
        break;
      case "2":
        neg = neg - Number(document.getElementById(ipr + i).value);
        break;
      default:
        break;
    }
  }
  //display each total on the page
  document.getElementById("positive").innerHTML = pos;
  document.getElementById("negative").innerHTML = neg;
}

Price 1:<br />
<input type="number" id="p1" name="p[]">
<select id="pn1" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 2:<br />
<input type="number" id="p2" name="p[]">
<select id="pn2" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br />
Price 3:<br />
<input type="number" id="p3" name="p[]">
<select id="pn3" name="pn[]">
  <option value="0"></option>
  <option value="1">+</option>
  <option value="2">-</option>
</select>
<br /><br />
Total +:<br />
<p id="positive">0</p>
Total -:<br />
<p id="negative">0</p>

文本框的计算

2 个答案: