Here is a delegated script using recommended event listeners instead of inline event handlers
I also fixed your invalid HTML in the buttons
I gave the options the values separated by semicolon to have two values in one option
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
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: <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% & 2%</option>
<option value="22">22% & 6%</option>
<option value="16">16% & 10%</option>
<option value="8">8% & 15%</option>
<option value="4">4% & 67%</option>
</select>
<span id="output"></span>
Solution 3 :
You want this ?
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% & 2%</option>
<option value="22">22% & 6%</option>
<option value="16">16% & 10%</option>
<option value="8">8% & 15%</option>
<option value="4">4% & 67%</option>
</select>
<span id="output"></span>
Problem :
Good day!
I am trying to work on a Real-time Percentage Calculator that displays results upon user input using JavaScript onkeyup=”calc();” and step up function attached to buttons. It works when i input text but does not work when i click the addition and subtraction keys side by side the input field.
Secondly i was hoping there could be a way to define two values for each drop down option and output each result of value percentage separately. Assuming <option value 1=”22″ value=2 “22” >22% & 6%
For the first question, here is my code.
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: <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% & 2%</option>
<option value="22">22% & 6%</option>
<option value="16">16% & 10%</option>
<option value="8">8% & 15%</option>
<option value="4">4% & 67%</option>
</select>
<span id="output"></span>
Comments
Comment posted by Aliu
Please help further with this. I want to display output with two different spans, e.g
Comment posted by Aliu
If you do understand my question Please do update the code and point me correctly!
Comment posted by mplungjan
You could also have done
Comment posted by Aliu
It worked Perfectly! Thanks a bunch… How about The second question? i was hoping there could be a way to define two values for each drop down option and output each result of value percentage separately. Assuming
