Issue with returning value from Event Listener

Javascript
,
1

Please help me how to get the math number displayed on the “Outside Function”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>

<body>
    <!-- Example Radio -->
    <form id="radioForm">
        <label>
            <input type="radio" name="option" value="Option 1"> Math: 5 + 5 =
        </label>
    </form>
    <p id="insideFunction">Inside Function: </p>
    <p id="outsideFunction">Outside Function: </p>

    <!-- JavaScript -->
    <script>
        const radioForm = document.getElementById("radioForm");
        const insideFunction = document.getElementById("insideFunction");
        const outsideFunction = document.getElementById("outsideFunction");
        let a, b = 5;
        let mathAwnser = 0;

        radioForm.addEventListener("change", math);

        function math() {
            mathAwnser = a + b;
            insideFunction.innerText = `Inside Function: ${mathAwnser}`;
        }

        outsideFunction.innerText = `Outside Function: ${mathAwnser}`;

    </script>
</body>

</html>
2

Hey @Burt.Kloppers, if i’m understanding correctly, I think problem is because outsideFunction.innerText = Outside Function: ${mathAwnser}; runs before the math function is triggered by the radio button selection. Therefore, mathAwnser is still 0 at that time if that what you mean.

To update the outsideFunction when the math operation is complete, you’ll need to move that code inside the math function or trigger it once the value of mathAwnser has been updated by the user interaction.

Could you see if this works?