1

estoy en la incognita de un problemilla, estoy aprendiendo javascript y me encuentro con que quiero hacer que el valor de un input se cambie, mediante un evento click a un boton, me renderiza perfecto 1 vez , pero cuando cambio el valor nuevamente , no me renderiza el nuevo valor.

function porcentaje (x,y){

    return x +(y*x/100)

}

USO DE LA FUNCION PARA SACAR PORCENTAJE CON EL BOTON

var calculate = document.querySelector('#calculate');

var priceCost = document.querySelector('#priceCost').value;

var percentageValue = document.querySelector('#percentage').value;

var priceSale = document.querySelector('#priceSale');

calculate.addEventListener('click',function(e){

        e.preventDefault()

        var resultado = porcentaje(parseInt(priceCost),parseInt(percentageValue))

        priceSale.value = resultado

    })

HTML

<label for="priceCost">Precio de costo</label>
<input type="number" name="priceCost" id="priceCost">

<label for="percentage">Porcentaje de venta</label>
<input type="number" name="percentage" id="percentage">

<label for="priceSale">Precio de venta</label>
<input type="number" name="priceSale" id="priceSale">

<button type="submit" id="calculate">Calcular</button>

Como les decia, al hacer click en el boton me saca el resultado del porcentaje, y me lo muestra en el input, pero al querer volver a pasarle otro porcentaje y hago click nuevamente en el boton con otro valor de porcentaje en el input, me queda siempre el primer resultado, "dato, cuando refresco la web y le vuelvo a dar click al boton, me genera el nuevo porcentaje con el valor nuevo.", Gracias a todos por su aporte! y a seguir aprendiendo!!

4
  • ¿Podrías agregar tu HTML por favor?
    – user128299
    Commented el 29 sept. 2020 a las 16:39
  • Hola!, gracias por tu tiempo!, ahi lo agregue. ¡Gracias!
    – Jon
    Commented el 29 sept. 2020 a las 16:45
  • Estas obteniendo los valores fuera del evento clic, y va a conservar el valor inicial, para resolverlo lleva todos los document.querySelector dentro de tu callback Commented el 29 sept. 2020 a las 17:54
  • @AníbalJorquera ¡funciona!, me estaba volviendo loco, ¡¡muchas gracias!!!, aun soy nuevo en esto y me encanta. Gracias por la ayuda!
    – Jon
    Commented el 29 sept. 2020 a las 18:00

1 respuesta 1

0

El problema es que estás definiendo priceCost y percentageValue con el valor de los campos y no se actualizan posteriormente.

var priceCost = document.querySelector('#priceCost').value;

Lo más adecuado es definir sin .value para tomar el campo y, cuando realices los cálculos lo agregas.

var calculate = document.querySelector('#calculate');
// Sin .value, para hacer referencia al campo y no al contenido
var priceCost = document.querySelector('#priceCost');
var percentageValue = document.querySelector('#percentage');
var priceSale = document.querySelector('#priceSale');

function porcentaje(costo, incremento) {
    return costo * ( 1 + (incremento / 100));
}
calculate.addEventListener('click',function(e){
    e.preventDefault();
    // Agregar .value a costo y porcentaje
    var resultado = porcentaje(parseInt(priceCost.value), parseInt(percentageValue.value));
    priceSale.value = resultado;
});
<label for="priceCost">Precio de costo</label>
<input type="number" name="priceCost" id="priceCost">

<label for="percentage">Porcentaje de venta</label>
<input type="number" name="percentage" id="percentage">

<label for="priceSale">Precio de venta</label>
<input type="number" name="priceSale" id="priceSale">

<button type="submit" id="calculate">Calcular</button>

1
  • Genial!!. muchas gracias, voy a probar tambien esta manera!.
    – Jon
    Commented el 29 sept. 2020 a las 20:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.