如何动态计算折扣 html/js

Question

我正在尝试使用 WordPress 的 WPForm 插件的 HTML 小部件显示 ((discount/product price) * 100) 的百分比值。折扣目前由“获取总计”按钮触发，但会阻止 WordPress 提交按钮运行。填写字段后如何触发总数而不是使用按钮？此处使用的表格：http://testelementor.temp513.kinsta.cloud/calculator/

<head>
<title>HTML Calculator</title>

<script type="text/javascript">
function calc() {
  var p = document.getElementById("wpforms-1365-field_12").value;
  var d = document.getElementById("wpforms-1365-field_13").value;
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}
</script>
</head>
<form>
<input type="button" style="color:#000;" name="Get Total" value="Get Total" onclick="GetTotal()" />

<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>


</form>
</body>
    
</html>

Answer 1

对两个输入字段使用 onchange 事件监听器。为了方便起见，我添加了两个输入字段并删除了按钮并将输入的初始值设置为 0 这样我们就不会得到 NaN.

function calc() {
  var p = parseInt(document.getElementById("wpforms-1365-field_12").value);
  var d = parseInt(document.getElementById("wpforms-1365-field_13").value);
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}

<form>
  p - <input type="text" value="0" id="wpforms-1365-field_12" onchange="GetTotal()">
  <br>
  d - <input type="text" value="0" id="wpforms-1365-field_13" onchange="GetTotal()">
<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>
</form>

Answer 2

尝试 oninput 或 onchange 事件侦听器。

function calc() {
  var p = document.getElementById("wpforms-1365-field_12").value;
  var d = document.getElementById("wpforms-1365-field_13").value;
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}

<head>
<title>HTML Calculator</title>
</head>
<form>

<input type="number" id="wpforms-1365-field_12">
<input type="number" id="wpforms-1365-field_13" oninput="GetTotal()">

<input type="button" style="color:#000;" name="Get Total" value="Get Total" />

<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>


</form>
</body>
    
</html>

如果您不能将 oninput() 属性直接添加到输入元素，您可以通过 JavaScript.

轻松添加

document.getElementById("wpforms-1365-field_13").oninput = GetTotal();

或者您也可以使用 onchange 事件侦听器。

document.getElementById("wpforms-1365-field_13").onchange = GetTotal();

区别是：

oninput 会在每次有人在输入域中插入一个字符时触发，而 onchange 只有在输入域失去焦点时才会发生。因此，请使用适用于您的应用程序的任何一个。

如何动态计算折扣 html/js

How to dynamically calculate discount html/js

html

javascript

wordpress

calculation