I want to declare a sub-function for storing important variables for the main function to save the readability of the main-funciton. The first code beneath is the main-function and the second is the sub-function.
function calci() {
VarOfElements(connection) ;
const condExceededPersons = inp2 > 4;
const condPersonsCosts = persons === 4 && km > 0;
const condNonePersonsCosts = persons < 4 || inp2 != null;
if (condExceededPersons) {
output.innerHTML = "Only four persons can drive with you!";
} else if (condPersonsCosts) {
var personsExpenses = 5;
} else if (condNonePersonsCosts) {
personsExpenses = 0;
}
const noInput = inp1 != null;
if (noInput) {
output.innerHTML = "Please enter a distance";
}
const conditionSevenO = km <= 7 && km > 0;
const overSevenOeq = km > 7 && km > 0;
if (conditionSevenO) {
y = 3.9
var wholeExpenses = routePrice * km + y + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
} else if (overSevenOeq) {
y = 3.9
let sevenLess = km - 7;
let overSevenRoute = 1.65;
let overSeven = sevenLess * overSevenRoute;
let seventhExpenses = 16.10;
wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
}
}
function VarOfElements(connection) {
var y;
var routePrice = 2.3;
inp1 = document.getElementById('input-box1');
inp2 = document.getElementById('input-box2');
var km = parseInt(document.getElementById('input-box1').value);
var persons = parseInt(document.getElementById('input-box2').value);
output = document.getElementById('output-box');
}
I think what you want is for the sub-function to return an object containing all the values. You can then assign this to variables in the main function.
In the code below I use destructuring to extract the values from the object.
inp1 and inp2 will never be null. They're DOM elements, not the values. And parseInt() returns NaN when the input is empty, not null, so you use isNaN() to test it. You need to test the variables that contain the values.
After you display an error message in output.innerHTML you should return from the function so you don't continue into the calculation code.
function calci() {
const {routePrice, km, persons, output} = VarOfElements();
const condExceededPersons = persons > 4;
const condPersonsCosts = persons === 4 && km > 0;
const condNonePersonsCosts = persons < 4 || !isNaN(persons);
if (condExceededPersons) {
output.innerHTML = "Only four persons can drive with you!";
return;
} else if (condPersonsCosts) {
var personsExpenses = 5;
} else if (condNonePersonsCosts) {
personsExpenses = 0;
}
const noInput = isNaN(km);
if (noInput) {
output.innerHTML = "Please enter a distance";
return;
}
const conditionSevenO = km <= 7 && km > 0;
const overSevenOeq = km > 7 && km > 0;
if (conditionSevenO) {
y = 3.9
var wholeExpenses = routePrice * km + y + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
} else if (overSevenOeq) {
y = 3.9
let sevenLess = km - 7;
let overSevenRoute = 1.65;
let overSeven = sevenLess * overSevenRoute;
let seventhExpenses = 16.10;
wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
}
}
function VarOfElements() {
const routePrice = 2.3;
const inp1 = document.getElementById('input-box1');
const inp2 = document.getElementById('input-box2');
const km = parseInt(inp1.value);
const persons = parseInt(inp2.value);
const output = document.getElementById('output-box');
return {routePrice, km, persons, output};
}Distance: <input id="input-box1">
<br>
Number of passengers: <input id="input-box2">
<br>
<button onclick="calci()">Calculate price</button>
<br>
Price:
<span id="output-box"></span>