Question

 <form>
 Chapter 1 - Please enter how many copys you would like <br>
 <input type="text" id="chap1"> <br><br>
 Chapter 2 - Please enter how many copys you would like <br>
 <input type="text" id="chap2"> <br><br>
 Chapter 3 - Please enter how many copys you would like <br>
 <input type="text" id="chap3"> <br><br>
 Chapter 4 - Please enter how many copys you would like <br>
 <input type="text" id="chap4"> <br><br>
 Chapter 5 - Please enter how many copys you would like <br>
 <input type="text" id="chap5"> <br><br>
  <b> Total price :  <output id = "total"> 0 </output> </b>

我正在尝试创建一个网站，您可以按章节订购书籍，每章费用为2英镑。我需要它将各个表单的值乘以2，然后在输出中显示此成本。我想使用java脚本来执行此操作而不是jQuery。

我还没有尝试过很多，因为我无法在这个主题上找到太多，所以任何正确方向的指针都会受到赞赏。

由于

Answer 1

function calc(){
    price = 2;
    fields = document.querySelectorAll("input[id^='chap']");
    tot = 0;
    for(i=0; i<fields.length; i++){
        tot += fields[i].value * price;
    }
    document.getElementById("total").innerHTML = tot;
}

这是一个简单的例子，你可以改进它

Answer 2

fiddle link

 <input type="text" id="chap1">
 <input type="text" id="chap2">
 <input type="text" id="chap3">
<input type="text" id="chap4"> 
<input type="text" id="chap5">
<b> Total price :  <output id = "total"> 0 </output> </b>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var text1= document.getElementById("chap1").value;
var text2= document.getElementById("chap2").value;
var text3= document.getElementById("chap3").value;
var text4= document.getElementById("chap4").value;
var text5= document.getElementById("chap5").value;
var  total=parseInt(text1)+parseInt(text2)+parseInt(text3)+parseInt(text4)+parseInt(text5);
 document.getElementById("total").innerHTML = total*2.1;
 }
 </script>

将表格值乘以X并在html中显示总计

2 个答案: