从输入字段更新javascript变量中的值

ds pahal 发表于 Dev

ds pahal

我有以下Javascript和HTML表单代码：

问题是，当我在字段中输入数字值并按提交按钮时，它不会将值发送到数量变量。如果我只是在输入值后刷新页面，则它可以工作。如何通过单击提交按钮获取数量变量的值？

var button = document.getElementById("theButton")
var send = button.form.valueId.value;
var quantiy = send;
var costPerItem = 10;
var amount = costPerItem * quantiy;
var tax = (amount * 3) / 100;
var discount = (amount * 2) / 100;
var total = amount - discount + tax;

document.write('Tax', " " + tax + "<br>");
document.write('Discount', " " + discount + "<br>");
document.write('total', " " + total);

<form>
  <input type="text" id="formValueId" name="valueId" />
  <input value="submit" type="button" id="theButton" />
</form>

萨米尔·撒

document.write用于将一些文本直接写入HTML文档。以后无法编辑。因此，您将不得不使用div并更新内部html

function updateVal() {
var button = document.getElementById("theButton")
var send= button.form.valueId.value ;
var quantiy=send;
var costPerItem=10;
var amount= costPerItem*quantiy;
var tax= (amount*3)/100;
var discount=(amount*2)/100;
var total= amount-discount+tax;

document.getElementById("tax").innerHTML = "Tax " + tax;
document.getElementById("discount").innerHTML = "Discount " + discount;
document.getElementById("total").innerHTML = "Total " + total;
  
  }

updateVal();

<form>
<input type="text" id="formValueId" name="valueId"/>
<input  value="submit" type="button" onclick="updateVal()" id="theButton"/>
</form>

<div id="tax">Tax: 0</div>
<div id="discount">Discount: 0</div>
<div id="total">total: 0</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。