Javascript 文本框的计算

我正在尝试用Javascript进行计算

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

当我只使用一个文本框时，脚本可以工作

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

示例：

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

总数+： （空）

总数-： 一百

我想要的是： 第一个文本框： 50 + 第二个文本框： 五十-

总数+： 五十

总数-： 五十

我正在使用以下脚本

HTML:

价格1:

+
-


价格2:

+
-


价格3:

+
-



总计+：



总计-：

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>

$（文档）。在（'change'，'[name^=pn]'上，函数selectQuantity（selectedValue）{
var e=document.getElementsByName（'pn[]）；
变量数量=e.options[e.selectedIndex]。值；
如果（数量='0'）{
document.getElementById（'positive'）。value=“”；
document.getElementById（'negative'）。value=“”；
}否则如果（数量=='1'）{
document.getElementById（'positive'）。value=“”；
document.getElementById（'negative'）。value=“”；
var numVal1=Number（document.getElementsByName（“p[]”）.value）；
var totalValue1=numVal1
设total=0；
for（document.getElementsByName（“p[]）的常数）
总+=+el.值；
document.getElementById（“正值”）.value=toFixed（2）的总计；
}否则{
document.getElementById（“正值”）.value=“”；
document.getElementById（“负”）.value=“”；
var numVal2=Number（document.getElementsByName（“p[]”）.value）；
var totalValue2=numVal2
设total=0；
for（document.getElementsByName（“p[]）的常数）
总+=+el.值；
document.getElementById（“正值”）.value=toFixed（2）的总计；
}
});

---

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

这可能是你想要的：

$（'[name^=pn]'）。在（'change'，function（）上{
设neg=0
设pos=0
$（'[name^=pn]'）。每个（函数（即）{
变量数量=e.options[e.selectedIndex]。值；
如果（数量='0'）{
}否则如果（数量=='1'）{
var num=Number（document.getElementById（$（this.data（'target'））.value）；
pos+=num；
}否则{
var num=数字（此.value）；
neg+=num；
}
});
document.getElementById（'positive'）。value=pos；
document.getElementById（'negative'）。value=neg；
});

价格1:

+
-


价格2:

+
-


价格3:

+
-



总计+：



总计-：


这里有一个关于vanilla JS的答案。我对JS代码进行了注释，以便您可以看到我在每个步骤中所做的操作。我也改变了你的HTML，把输入改为“数字”而不是“文本”。这样，您就不能让用户意外地将字母输入框中。这使得以后的错误检查更容易一些。我还将显示总计的位置改为段落而不是文本框，这样用户就不能在其中输入任何内容。一般来说，我不喜欢使用输入，除非用户应该在那里输入一些东西


//声明快捷方式
常量输入=document.getElementsByTagName（“输入”）；
const selects=document.getElementsByTagName（“选择”）；
const ipr=“p”；
const spr=“pn”；
//循环并将事件侦听器添加到所有文本框和下拉列表中
对于（变量i=0；i

价格1:

+
-


价格2:

+
-


价格3:

+
-



总计+：

0
总计-：

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