Hola, todavía soy relativamente nuevo en js y he estado tratando de construir esta calculadora de precios, que debería generar el resultado de los 2 campos (sin tener que enviar nada posiblemente), ¡pero tengo problemas para calcular los datos ingresados! ¿Alguien puede decirme qué estoy haciendo mal y si se puede hacer en Vanilla js? Gracias por adelantado
// (should) calculate const priceCalculator = (base, height) => { const outcome = (base * height) / 100; return outcome; } // gets & stores base value const getBase = function() { const base = document.getElementsByClassName('field')[0].value; console.log( base ); return base; } // gets & stores height value const getHeight = function() { const height = document.getElementsByClassName('field')[1].value; console.log( height ); return height; } let result = priceCalculator(getBase, getHeight); // result document.getElementById('get-result').innerHTML += result; <div class="calculator-wrapper"> <form class="calculator" action="somewhere.html" method="get"> <p>Base cm</p> <input type="number" class="field" id="base-field" value="" onblur="getBase()"> <p>Height cm</p> <input type="number" class="field" id="height-field" value="" onblur="getHeight()"> <h2>Your price is: <span id="get-result"></span>€</h2> </form> </div>Entonces, lo que tiene es demasiado complejo para lo que necesita para resolver el problema. Realmente solo necesita tener una función, a la que puede llamar en el desenfoque de cualquiera de los campos (o mejor aún para el usuario, tener un botón para calcular específicamente el precio). Entonces, en javascript, reemplace lo que tiene con algo como esto:
function calculatePrice(){ document.getElementById('get-result').innerHTML = parseInt(document.getElementsByClassName('field')[0].value) + parseInt(document.getElementsByClassName('field')[1].value); }Y en HTML, simplemente cambie lo que llama su onBlur a 'calculatePrice()'.
Esta es una forma de hacerlo, o podría pasar parámetros a la función.
La función incorporada parseInt() tomará la entrada de texto (el valor predeterminado para sus entradas) y los convertirá en números enteros para que no se agreguen juntos como texto. También hay parseFloat() para números no enteros.
Ante todo. Obtendrá siempre valores de cadena de Formfields. Para el cálculo necesitarás números, enteros.
Luego, debe pasar las funciones y no los nombres de var con ámbito. priceCalculator(getBase(), getHeight());
¡Entonces funcionaría!
// (should) calculate const priceCalculator = (base, height) => { const outcome = (base * height) / 100; return outcome; } // gets & stores base value const getBase = function() { const base = document.getElementsByClassName('field')[0].value; console.log( base ); return parseInt(base); } // gets & stores height value const getHeight = function() { const height = document.getElementsByClassName('field')[1].value; return parseInt(height); } let result = priceCalculator(getBase(), getHeight()); // result document.getElementById('get-result').innerHTML += result; <input class="field" value="2"> <input class="field" value="3"> <div id="get-result"></div>