Problem Changing Font color in JavaScript

Question

I am building a calculator and have to make it so that every time an operator button is hit, the font turns red.

function changeBtnColor(entry){
    if(entry == '+'){
        calculator.getElementById("buttonAdd").style.fontcolor = 'red';
        calculator.answer.value +=' + ';
    }
    if(entry == '-'){
        calculator.getElementById("buttonSub").style.fontcolor = 'red';
        calculator.answer.value +=' - ';
    }
    if(entry == '*'){
        calculator.getElementById("buttonMult").style.fontcolor = 'red';
        calculator.answer.value +=' * ';
    }
    if(entry == '/'){
        calculator.getElementById("buttonDiv").style.fontcolor = 'red';
        calculator.answer.value +=' / ';
    }
}

An example of how I call this js function is:

<form id = "calculator" name=”calculator”>
        <table id = "myTable" border = "2">
            <tbody>
                <tr>
                    <td colspan = "4">
                         <input id = "answer" type="text" name="answer"/> 
                    </td>
                 </tr>
                 <tr>
                    <td><input id = "button7" type="button" value="7" onClick="calculator.answer.value +='7'"></td>
                    <td><input id = "button8" type="button" value="8" onClick="calculator.answer.value +='8'"></td>
                    <td><input id = "button9" type="button" value="9" onClick="calculator.answer.value +='9'"></td>
                    <td><input id = "buttonAdd" type="button" value="+" onClick="changeBtnColor('+')"></td>
                 </tr>

When i do this, I get the error:

calculator.getElementById is not a function
at changeBtnColor (calculator.js:44)
at HTMLInputElement.onclick (calculator.html:21)

Does anyone have any advice for this error or can tell me why it is happening? thanks!

Do you define the calculator variable anywhere? If not, it will be undefined, which is a likely cause of the error you see. (I presume it's supposed to refer to the <form id-"calculator"> element, but do you actually assign this anywhere?) — Robin Zigmond
– Robin Zigmond, Commented Sep 30, 2018 at 21:54
I just call it in the <form id.....> where do you recommend actually assigning it? — kade
– kade, Commented Sep 30, 2018 at 22:00
I'm not sure what you mean you call it "in" the element. You can't assign JS variables in HTML, you need to do it in the JS code itself. Here, one way you can do that is var calculator = document.getElementById("calculator"). And actually, now I've looked at your code more closely, none of it will work anyway - because getElementById only exists as a method on the document object, not on any other DOM node. — Robin Zigmond
– Robin Zigmond, Commented Sep 30, 2018 at 22:04
@RobinZigmond Yes I see that now.. do you have any tips as to how to change the font color of the button on click as well as output the operator onto the screen? — kade
– kade, Commented Sep 30, 2018 at 22:14
Your code seems fine in outline (although it could be improved to avoid repeating yourself so much), you just need to reference the actual elements (whether by ids, name, or other CSS selectors) and then set their .style.color. (fontcolor is not a valid CSS property). I would also suggest it's worth looking at using jQuery - although not essential, it makes DOM and CSS transformations like these a bit less long-winded. — Robin Zigmond
– Robin Zigmond, Commented Sep 30, 2018 at 22:19

Ramin · Accepted Answer · 2018-09-30 22:06:22Z

2

function "getElementById" is defined for document object, not for form elements.

document.getElementById("buttonAdd")

answered Sep 30, 2018 at 22:06

Ramin

1338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem Changing Font color in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related