I can't figure out how to return a variable from a function

[distracted_meerkat]

Hi. I’m not sure whether it’s allowed to post non-challenge / project related questions here but here goes.

I’m trying to get a variable (with it’s values) out of a function but nothing I’m doing seems to be working. I’m thinking the function might not be structured correctly for this to work but I don’t know how to fix it. Below is the function, its variables and my attempt at calling the function. Calling it gives me this error though: Uncaught TypeError: Cannot read properties of undefined (reading ‘target’)

let outputMbKwh = document.getElementById('outputMbKwh');
let inputMonthlyBill = document.getElementById('inputMonthlyBill');
var monthlyBillToKwhConversion = 0;

function calcMbKwh(event) {
	inputMonthlyBill = event.target.value;
	inputMonthlyBill.innerHTML = inputMonthlyBill;
	if (inputMonthlyBill < maxCeilingDiscountedBracketInRands) {
		monthlyBillToKwhConversion = inputMonthlyBill / higherTarrif
	} else if (inputMonthlyBill > maxCeilingDiscountedBracketInRands) {
		monthlyBillToKwhConversion = Math.round(((inputMonthlyBill - maxCeilingDiscountedBracketInRands) / higherTarrif) + (maxCeilingDiscountedBracketInRands / discountedTarrif))
	}
	outputMbKwh.innerHTML = monthlyBillToKwhConversion;
	return (monthlyBillToKwhConversion);
}

let monthlyBillToKwhConversion2 = calcMbKwh(event);
console.log('monthlyBillToKwhConversion', monthlyBillToKwhConversion);

The value of the variable I’m calling above is showing up in the form that goes with this but since I can’t get it out of the function I can’t use it in other calculations. Just the fisrt form field works when I call the variable in that way as well. Full code can be seen in the codepen here

Sorry if it’s a disaster, I’m still very much a beginner

[sanity]

That error suggests, that whatever what is passed in to the function as event, doesn’t have target property.

The line to look at is:

let monthlyBillToKwhConversion2 = calcMbKwh(event);

What is the event here? Does it exist at this point?

[ingabd]

Your code is doing ok, tried to enter 300 and it gives the intended result 90 something,
the problem is with “event” when you invoke the function via onchange,

when the function is invoked because you enter some value to the input, say 300, event.target.value will evaluate to 300, your error message (undefined when reading target) come from first rendering of the html, because when it is first rendered, it invoked the function, calling the event, but there is no event yet, hence undefined, your attribute value=“0” (you use this as initial value?) cannot be accessed via event, because it is not an event,

try add conditional like this in your function, the error will be solved:

if (!event) inputMonthlyBill = 0
else inputMonthlyBill = event.target.value

or

if (!event) inputMonthlyBill = document.getElementById('inputMonthlyBill').value
else inputMonthlyBill = event.target.value

the first will assign 0 directly as initial value, the second will take value from value attribute of the input element,

Also, my concern is, you assign inputMonthlyBill with document.getElementById, you get the html element, but then in the function you assign it a number (it is a string but converted to number for subsequent calculations) from event.target.value, I think this can lead to unexpected bug/error, below I console.log(inputMonthlyBill), first it is html element, then it is a string … I think you meant to get the value attribute, didnt it?

if you use the first assignment as a shorthand, better use different variable name …

const monthlyBillElement = document.getElementById('inputMonthlyBill')
const inputMonthlyBill = monthlyBillElement.value

This is my guess, hope this help.

[distracted_meerkat]

Hi. Thanks for your reply! I added “event” in the function call because it’s the parameter when the function CalcMbKwh created. I don’t know if that’s the right way to do it though. Should I be using something else in the parentheses when I call the function?

[distracted_meerkat]

Hi. Thanks for the advice! I’ll try that out

[lasjorg]

When you see a function definition with e or event in the parameter list it is most likely a handler function that is meant to be used as a callback. That is, it gets invoked by an event (like a click event or manual dispatch).

For an input element the event might be a change or input event that is listened for. Or if it’s a form it would be a submit event.

Basically, something happens in the DOM which triggers some event. That event is listened for and a callback function is invoked. The callback is passed an event object for use inside the function.

Event - Web APIs | MDN