Attempting to practice what i just started learning about the DOM, having trouble getting a simple calculator to functio

Hey Dehn,

So I've noticed several things. First, the calcReport which holds the h2 tags youre going to insert should be strings and instead of the curly braces to show the calcResult value, you can concatenate them.

 calcReport = '<h2>Your beer is '+ calcResult +'% ABV</h2>';

Second, the addEventListener expects the second parameter to be a call back function, or a function that gets called when the event is trigger, which oddly enough isnt suppose to be the calcFunc youre trying to call. instead calcFunc goes inside the call back function. If not, calcFunc will get called immediately and not when you click the button.

Third, I havent seen your html code, where og and fg Inputs are, But i think your value will be end up as 0 since they only get set once when the script is called. If you enter in something in the input after the script is called, ogInput and fgInput wont update so thier values will stay blank. You can move them into the call back function. So i edited your code and made it look like this.

const calcSubmit = document.getElementById("calcSubmit"); 
const abvNum = 131.25; 
let calcResult = 0.0; 
let calcReport;

const calcFunc = (num1, num2) => {
    calcResult = (num1 - num2) * abvNum;
    calcReport = '<h2>Your beer is '+ calcResult +'% ABV</h2>';
    document.getElementById("calcOutput").innerHTML = calcReport;
    return false; 
};
 /* const displayResult = () => { 
        calcFunc(ogInput, fgInput);
        document.getElementById("calcOutput").innerHTML = calcReport; 
        return false; 
    };
     */

calcSubmit.addEventListener("click", () => {
    let ogInput = document.getElementById("ogInput").value;
    let fgInput = document.getElementById("fgInput").value; 
    calcFunc(ogInput, fgInput);

});

Hope this helps.

Now I seen youre html code, you can remove the onclick attribute from the button tag since youre already adding an event listener in the js, and youll need to add the type attribute to the button of value button to prevent the page from refreshing

 <button class="btn btn-primary" id="calcSubmit" type='button'> Calculate ABV </button>

Another way you can do it is by removing the addeventlistener and have the onclick call the calcFunc and have it pass in the ogInput and fgInput. yyoull need to add name attributes to those inputs elements.

<input type="text" id="ogInput" name='og' />
 <input type="text" id="fgInput" name='fg' />
<button class="btn btn-primary" id="calcSubmit" type='button' onclick='calcFunc(og.value,fg.value)'>
            Calculate ABV
</button>