具有两个输出的实时百分比计算器

Question

您好！

我正试图开发一种实时百分比计算器，该计算器在用户输入时使用JavaScript onkeyup＝"来显示结果；calc(("以及附在按钮上的升级功能。当我输入文本时，它起作用，但当我在输入字段旁边单击加法和减法键时，它不起作用。

其次，我希望有一种方法可以为每个下拉选项定义两个值，并分别输出值百分比的每个结果。假设<选项值1＝"0"；22〃；值＝2"；22〃>22%&6%

对于第一个问题，这里是我的代码。

function calc() {
var i = document.getElementById("amount_trade").value;
var p = document.getElementById("percent").value;
var o = (i / 100) * p;
document.getElementById("output").innerHTML = o;
}

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

Input: <button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepDown()" class="btn btn-primary default"><strong>-</i></strong></button>
<input type="number" id="amount_trade" onkeyup="calc();" onchange="calc();" />
<button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepUp()" class="btn btn-primary default"><strong>+</button><br />
<select class="form-control select2-single" data-width="100%" id="percent" onchange="calc();">
<option value="50">50% &amp; 2%</option>
<option value="22">22% &amp; 6%</option>
<option value="16">16% &amp; 10%</option>
<option value="8">8% &amp; 15%</option>
<option value="4">4% &amp; 67%</option>
</select>

<span id="output"></span>

Answer 1

下面是一个使用推荐的事件侦听器而不是内联事件处理程序的委托脚本

我还修复了按钮中的无效HTML

我给了这些选项用分号分隔的值，在一个选项中有两个值

const container = document.getElementById("container");
const amount = document.getElementById("amount_trade")
const percent = document.getElementById("percent");
const out1 = document.getElementById("out1");
const out2 = document.getElementById("out2");
// reusable function
const calc = function(e) {
const amt = amount.value;
const p = percent.value.split(";")
const o1 = (amt / 100) * p[0];
const o2 = (amt / 100) * p[1];
out1.innerHTML = o1.toFixed(2);
out2.innerHTML = o2.toFixed(2);
};
// any click in the container - it is called delegation
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("btn")) { // use a more specific class if you will have more buttons
if (tgt.id === "up") amount.stepUp(); // it is up
else amount.stepDown(); // else it is down. Add an "if" if needed
}
calc(); // always calc
})
container.addEventListener("input", calc); // any input will calculate

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

<div id="container">
Input: <button type="button" id="down" class="btn btn-primary default">-</button>
<input type="number" id="amount_trade" value="0" />
<button type="button" id="up" class="btn btn-primary default">+</button><br />
<select class="form-control select2-single" data-width="100%" id="percent">
<option value="50;2">50% &amp; 2%</option>
<option value="22;6">22% &amp; 6%</option>
<option value="16;10">16% &amp; 10%</option>
<option value="8;15">8% &amp; 15%</option>
<option value="4;67">4% &amp; 67%</option>
</select>

<span id="out1"></span> - <span id="out2"></span>
</div>

你也可以有一个输出div，然后

output.innerHTML = `<span id="out1">${o1.toFixed(2)}</span>  
<span id="out2">${o2.toFixed(2)}</span>`;

Answer 2

您可以将calc()功能添加到按钮onclick

function calc() {
var i = document.getElementById("amount_trade").value;
var p = document.getElementById("percent").value;
var o = (i / 100) * p;
document.getElementById("output").innerHTML = o;
}

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

Input: <button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepDown();calc();" class="btn btn-primary default"><strong>-</i></strong></button>
<input type="number" id="amount_trade" onkeyup="calc();" onchange="calc();" />
<button type="button" onclick="this.parentNode.querySelector('#amount_trade').stepUp();calc();" class="btn btn-primary default"><strong>+</button><br />
<select class="form-control select2-single" data-width="100%" id="percent" onchange="calc();">
<option value="50">50% &amp; 2%</option>
<option value="22">22% &amp; 6%</option>
<option value="16">16% &amp; 10%</option>
<option value="8">8% &amp; 15%</option>
<option value="4">4% &amp; 67%</option>
</select>

<span id="output"></span>

Answer 3

你想要这个吗？

function calc() {
var i = document.getElementById("amount_trade").value;
var p = document.getElementById("percent").value;
var o = (i / 100) * p;
document.getElementById("output").innerHTML = o;
}
function plus () { 
document.getElementById("amount_trade").stepUp();
calc();
}
function minus () { 
document.getElementById("amount_trade").stepDown() ;
calc()
}

<button type="button" onclick="minus()" class="btn btn-primary default"><strong>-</i></strong></button>
<input type="number" id="amount_trade" onkeyup="calc();" onchange="calc();" />
<button type="button" onclick="plus()" class="btn btn-primary default"><strong>+</button><br />
<select class="form-control select2-single" data-width="100%" id="percent" onchange="calc();">
<option value="50">50% &amp; 2%</option>
<option value="22">22% &amp; 6%</option>
<option value="16">16% &amp; 10%</option>
<option value="8">8% &amp; 15%</option>
<option value="4">4% &amp; 67%</option>
</select>

<span id="output"></span>