Quiero declarar una subfunción para almacenar variables importantes para la función principal para guardar la legibilidad de la función principal. El primer código debajo es la función principal y el segundo es la función secundaria.
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'); }Creo que lo que quieres es que la subfunción devuelva un objeto que contenga todos los valores. Luego puede asignar esto a las variables en la función principal.
En el siguiente código, uso la desestructuración para extraer los valores del objeto.
inp1 e inp2 nunca serán null . Son elementos DOM, no los valores. Y parseInt() devuelve NaN cuando la entrada está vacía, no null , por lo que usa isNaN() para probarla. Necesita probar las variables que contienen los valores.
Después de mostrar un mensaje de error en output.innerHTML , debe regresar de la función para no continuar con el código de cálculo.
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>