Uncaught type error: cannot set of innerHTML

JavaScript
1

JavaScript newbie here. I am having problems with the calculator I am trying to build using JavaScript. I was following a tutorial on youtube
Here is the JavaScript Code.

//Calculator
function calculator(button){
    if( button.type =="operator"){
        data.operation.push(button.symbol);
        data.result.push(button.formula);

    }
    else if(button.type =="number"){
        data.operation.push(button.symbol);
        data.result.push(button.formula);

    }
    else if(button.type =="key"){
        if(button.name =="clear" ){
            data.operation = [];
            data.result = [];
            updateOutputResult(0);

        }

    }
    else if(button.name == "delete"){
        data.operation.pop();
        data.result.pop();
    }
    else if(button.type =="calculate"){
        let join_result = data.result.join('');

        let result;
        try{
            result = eval(join_result);
        } catch (error){
            if( error instanceof SyntaxError){
                result = "Syntax Error!";
                updateOutputResult(result);
                return;
            }
        }

        result = formatResult(result);

        updateOutputResult(result);

        data.operation = [];
        data.result = [];

        data.operation.push(result);
        data.result.push(result);

        return;

    }
    updateOutputOperation(data.operation.join(''));
    
}
function updateOutputOperation(operation){
    output_operation_element.innerHTML = operation;
}
function updateOutputResult(result){
    output_result_element.innerHTML = result;
}

Thats the part that shows the error in my console. Will appreciate all the help.

2

Can you be more specific about what error you are getting and under what conditions?

And if you are doing this in an online IDE, a link to that would be helpful. If not, a linking to a repo (like on github) would be helpful.

I’m a little confused about your code. For example:

function updateOutputOperation(operation){
    output_operation_element.innerHTML = operation;
}

What is output_operation_element? Where is it defined? If you are defining that somewhere else, could you console.log it so we can see what it is?

3

Hi Kevin,
Thank you very much for responding to my query. Let me post a link to the code so you can better understand my confusion. Link to the code.

4

As I suggested, if log out that value:

function updateOutputOperation(operation){
    console.log(output_operation_element)
    output_operation_element.innerHTML = operation;
}

It shows null. That means that your selector isn’t working the way you think. When I look at that selector:

const input_element = document.querySelector(".input");

That looks odd to me - how can selecting off of a class work? Since there can be more than one use of a class, that won’t select a single element but I’d expect it to select (if it selected anything) to return and array. But as it turns out, it selects nothing.

I think that if you figure out why those aren’t working, then you’ll be able to move forward on this.

5

That’s why it was saying:

Uncaught TypeError: Cannot set property ‘innerHTML’ of null

It can’t set that property because we are trying to set it on null, which is a primitive and can’t have properties.

It was telling you exactly what the problem was. That’s why it’s important to read the error messages. And why it is important to report them properly for us to help you.

6

Just a quick comment on querySelector()…it only returns the first element matched, so this works when several elements are matched.

7

When you specify the css selector pattern, there is a difference between “.operation.value” and “.operation .value”. The second pattern has a space between “.operation” and “.value”. If you don’t use the space, it will look for the first element that has the two classes “operation” and “value”. This is wrong, since I assume you are looking for the element having class “value” and one of its parent elements has the class “operation”.

When I inserted a space between “.operation” and “.value” (same between “.result” and “.value”, then the calculator seemed to work.

Just note that you might want to update the result display after every key press on a number to show the user that the calculator received the input. Currently the result is updated when the calculate button is pressed ("=").

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.