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 of 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 class="row">
        <div class="col">
          <p style="text-align: left">Cantidad</p>
          <input
            id="cantidad"
            type="number"
            class="form-control"
            placeholder="Cantidad"
            aria-label="Cantidad"
          />
        </div>
        <div class="col">
          <p style="text-align: left">Estudiante</p>
          <select
            id="categoria"
            class="form-select"
            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 class="col">
        <p 
        id="resultado"
        
        style="background-color: aquamarine;"
        class="m-0"   
        >Total a pagar</p>
        
      </div>

      <br />
      <!-- Poner dos botones, Borrar y resumen-->

      <div class="row">
        <div class="col">
          <button
            style="
              width: auto;
              color: white;
              background-color: rgb(128, 204, 52);
            "
            type="button"
            class="btn btn-success container-fluid justify-content-center"
          >
            Borrar
          </button>
        </div>
        <div class="col">
          <button
            id="resumen"
            onclick=""
            style="
              width: auto;
              color: white;
              background-color: rgb(128, 204, 52);
            "
            type="button"
            class="btn btn-success container-fluid justify-content-center"
          >
            Resumen
          </button>
        </div>
      </div>
    </div>

compota2003 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

4

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 .number class to <input> and <select>
  • Replace <p> with an <output>
  • 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

// Reference form
const UI = document.forms.UI;

// Bind form to input and change events
document.forms.UI.oninput = discountPrice;

// Set total.value once
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" value="0"></output></p>
</form>