Javascript Function Response "undefined"

1

Intended Behavior
When the user clicks a button that has an ID of either “add”, “subtract”, “multiply”, “divide”, or “surprise”, I want to return the appropriate value to the

element with the id of “bitMoreMathResult.”

Problem
The if statement syntax to say “if the button’s element id=x, do y,” is incorrect and I am stumped on what the correct syntax should be. The contents of the if statements don’t ever execute (I know this because I placed a console.log() message inside each conditional statement and the console did not return any of them); because of this, undefined is currently returning to the p element.

What I need

Help :slight_smile:

I really don’t want to have 5 different functions here, 1 per button. I’d like 1 function that can execute appropriately, according to which button was clicked. I’d also like to avoid using Jquery if possible; I’m open to using a switch statement instead; I’ve considered that but hadn’t made the leap yet.

Thank you!

Code

Javascript:

function bitMoreMath() {
    let y = document.getElementById("bitMoreMathValue1").value;
    let z = document.getElementById("bitMoreMathValue2").value;
    let result;
    if (document.getElementById.value=="add") {
        result = +y + +z;
    } else if (document.getElementById.value=="subtract") {
        result = +y - +z;
    } else if (document.getElementById.value=="multiply") {
        result = +y * +z;
    } else if (document.getElementById.value=="divide") {
        result = +y / +z;
    } else if (document.getElementById.value=="surprise") {
        result = "Surprise!";
    }
      document.getElementById("bitMoreMathResult").innerHTML = result;
    }

HTML:

<h2>5. A Bit More Math</h2>
<p>Enter first number:</p>
<p><input type="number" id="bitMoreMathValue1" name="bitMoreMathValue1" placeholder="2"></p>
<p>Enter second number:</p>
<p><input type="number" id="bitMoreMathValue2" name="bitMoreMathValue2" placeholder="2"></p>
<button onclick="bitMoreMath()" class="rounded-pill" id="add">Add them!</button>
<button onclick="bitMoreMath()" class="rounded-pill" id="subtract">Subtract them!</button>
<button onclick="bitMoreMath()" class="rounded-pill" id="multiply">Multiply them!</button>
<button onclick="bitMoreMath()" class="rounded-pill" id="divide">Divide them!</button>
<button onclick="bitMoreMath()" class="rounded-pill" id="surprise">Surprise me!</button>
<p id="bitMoreMathResult"></p>
2

You don’t need 5 functions or jquery, but you need to have your function know which button was clicked. document.getElementById.value won’t do that.

3

Hello,

document.getElementById.value=="add" is not selecting anything, it looks like you’re trying to select element by id, and check if it’s id is the id you selected (if this makes sense).
HTML DOM getElementById() Method

What you actually want is to get id of event target, onclick handler is window.onclick, so your target will be window.event.target

You can also find event delegation technique useful .
:vulcan_salute:

2 Likes
4

Thanks, @Annestezia. I ended up using event delegation!

2 Likes