Hey i'm still relatively new to js and i've been trying to build this price calculator, that should output the result of the 2 fields (without having to submit anything possibly), but i'm struggling with calculating the inputted data! Can anybody tell me what i'm doing wrong and if it can be done in vanilla js? Thanks in advance
// (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>So what you have is overly complex for what you need to solve the problem. You only really need to have one function, which you can call onblur of either field (or better yet for the user, have a button to specifically calculate the price). So in javascript replace what you have with something like this:
function calculatePrice(){
document.getElementById('get-result').innerHTML = parseInt(document.getElementsByClassName('field')[0].value) + parseInt(document.getElementsByClassName('field')[1].value);
}
And in HTML, just change what your onBlur's call to 'calculatePrice()'.
This is one way to do it, or you could pass parameters into the function.
The parseInt() built in function will take text input (the default for your inputs) and convert them to integers so they will not be appended together as text. There is also parseFloat() for non integer numbers.
First of all. You will get always string values from Formfields. For calculation you will need numbers, integers.
Then you have to pass the functions and not the scoped var names. priceCalculator(getBase(), getHeight());
Then it would work!
// (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>