I need a button to perform a multiplication of two inputs (one has a dropdown menu with percentages) and deliver the result in a
, with javascript. I have these inputs to insert a number of tickets and choose a category, and when pressing the summary button, the javascript code performs the following count. Cantidad x Categoria (each category has a discount of 80%, 50%, 15%) x the input value =200.
I just started to study javascript and this is part of a job that I have to do. Apologies in advance for the ignorance.
var entrada = 200
function resumen (){
var cantidad = parseInt (document.getElementById("cantidad").value);
var categoria = parseFloat (document.getElementById("categoria").value);
if (cantidad > 0){
let resultado = (cantidad*categoria)*entrada;
}
} </div>
<br />
<div >
<div >
<p style="text-align: left">Cantidad</p>
<input
id="cantidad"
type="number"
placeholder="Cantidad"
aria-label="Cantidad"
/>
</div>
<div >
<p style="text-align: left">Estudiante</p>
<select
id="categoria"
aria-label="Default select example"
>
<option value="0.8">Estudiante</option>
<option value="0.5">Trainee</option>
<option value="0.15">Junior</option>
</select>
</div>
</div>
<br />
<div >
<p
id="resultado"
style="background-color: aquamarine;"
>Total a pagar</p>
</div>
<br />
<!-- Poner dos botones, Borrar y resumen-->
<div >
<div >
<button
style="
width: auto;
color: white;
background-color: rgb(128, 204, 52);
"
type="button"
>
Borrar
</button>
</div>
<div >
<button
id="resumen"
onclick=""
style="
width: auto;
color: white;
background-color: rgb(128, 204, 52);
"
type="button"
>
Resumen
</button>
</div>
</div>
</div>CodePudding user response：
If you just want to pass - Example B
Assign classes to everything and bind <button> to the "click" event. See events and event delegation on how to manage user interaction.
If you want an A - Example A
Save the button for another function like sending data or jumping to the next page. Simple calculations can be done immediately upon user interaction.
- Wrap everything in a
<form> - Bind
<form id="X">to the "input" event - Add
.numberclass to<input>and<select> - Replace
<p>with an<output>or place an<output>within<p> - See HTMLFormElement and
form controls on how to control
<form>and it's fields. - See events and event delegation on how to manage user interaction.
Details are commented in example
Example A
// Reference form
const UI = document.forms.UI;
// Bind form to input and change events
document.forms.UI.oninput = discountPrice;
// Set price.value and total.value once
UI.elements.price.value = (200).toFixed(2);
UI.elements.total.value = (200).toFixed(2);
function discountPrice(e) {
// Reference to all form controls
const IO = this.elements;
// Ensure price.value is always formatted
IO.price.value = parseFloat(IO.price.value).toFixed(2);
/*
If the user entered data into anything with the class .number...
*/
if (e.target.matches('.number')) {
/*
...get the values of price and discount and turn them into numbers
*/
let P = (IO.price.value);
let D = (IO.discount.value);
/*
If the value of price is greater than 0...
...Make the value of total be:
price.value - (price.value x discount.value) suffix a '.NN'
*/
if (P > 0) {
IO.total.value = (P - (P * D)).toFixed(2);
}
}
}<form id='UI'>
<input id='price' class='number' type='number' min='0' value='200'>
<select id='discount' class='number'>
<option value='0'>No Discount</option>
<option value='.1'>10%</option>
<option value='.25'>25%</option>
<option value='.5'>50%</option>
</select>
<p><output id='total' class='number'></output></p>
</form>Example B
const price = document.querySelector('.price');
const discount = document.querySelector('.discount');
const button = document.querySelector('.button');
const total = document.querySelector('.total');
button.onclick = discountPrice;
function discountPrice(e) {
total.textContent = parseFloat(price.value) - (parseFloat(price.value) * parseFloat(discount.value));
}
<input class='price' type='number' min='0' value='200'>
<select class='discount'>
<option value='0'>No Discount</option>
<option value='.1'>10%</option>
<option value='.25'>25%</option>
<option value='.5'>50%</option>
</select>
<button class='button'>Total</button>
<p class='total'>200.00</p>CodePudding user response：
@zer00ne explained a few concepts very well and I agree with his recommendation to link the calculation to the input event of any of the input fields. However, in case you are still interested in a solution that is based on your HTML, then the following would be a minimalist way of putting your resumen button into action:
const price = 200,
[amount,discount,total,btn]=
["cantidad","categoria","resultado","resumen"].map(e=>document.getElementById(e));
btn.onclick=()=>total.textContent=amount.value*discount.value*price </div>
<br />
<div >
<div >
<p style="text-align: left">Cantidad</p>
<input
id="cantidad"
type="number"
placeholder="Cantidad"
aria-label="Cantidad"
/>
</div>
<div >
<p style="text-align: left">Estudiante</p>
<select
id="categoria"
aria-label="Default select example"
>
<option value="0.8">Estudiante</option>
<option value="0.5">Trainee</option>
<option value="0.15">Junior</option>
</select>
</div>
</div>
<br />
<div >
<p
id="resultado"
style="background-color: aquamarine;"
>Total a pagar</p>
</div>
<br />
<!-- Poner dos botones, Borrar y resumen-->
<div >
<div >
<button
style="
width: auto;
color: white;
background-color: rgb(128, 204, 52);
"
type="button"
>
Borrar
</button>
</div>
<div >
<button
id="resumen"
onclick=""
style="
width: auto;
color: white;
background-color: rgb(128, 204, 52);
"
type="button"
>
Resumen
</button>
</div>
</div>
</div>