basic javascript getElementById clarification

Question

I had to do a simple calculator using HTML and JS and since I've never programmed on JS I have a question in order to get the logic right. Here is the code:

I have a function which has to write on the screen of my calculator;

function writeToScreen(a) { var elem = document.getElementById('screen'); switch (a.value) { case '+': { if (firstOperation) { lastOperation = '+'; firstNumber = elem.value; elem.value = ""; firstOperation = 0; } else { lastOperation = '+'; firstNumber += elem.value; } } break; case '-': { if (firstOperation) { lastOperation = '-'; firstNumber = elem.value; elem.value = ""; firstOperation = 0; } else { lastOperation = '-'; firstNumber -= elem.value; } } break; case '*': { if (firstOperation) { lastOperation = '*'; firstNumber = elem.value; elem.value = ""; firstOperation = 0; } else { lastOperation = '*'; firstNumber *= elem.value; } } break; case '/': { if (firstOperation) { lastOperation = '/'; firstNumber = elem.value; elem.value = ""; firstOperation = 0; } else { lastOperation = '/'; firstNumber /= elem.value; } } break; case '=': { if (firstOperation) { } else { switch (lastOperation) { case '+': { elem.value = (firstNumber + elem.value); } break; case '-': { elem.value = firstNumber - elem.value; } break; case '/': { elem.value = firstNumber / elem.value; } break; case '*': { elem.value = firstNumber * elem.value; } break; default: { } break; } firstOperation = 1; lastOperation = ''; } } break; case 'C': { elem.value = ""; } break; case '1': { elem.value += a.value; } break; case '2': { elem.value += a.value; } break; case '3': { elem.value += a.value; } break; case '4': { elem.value += a.value; } break; case '5': { elem.value += a.value; } break; case '6': { elem.value += a.value; } break; case '7': { elem.value += a.value; } break; case '8': { elem.value += a.value; } break; case '9': { elem.value += a.value; } break; case '0': { elem.value += a.value; } break; default: { } break; } }

Here is the screen of my calculator:

<td colspan=3 align="center"><input id="screen" type=text disabled></input></td>

and here is one button of my calc:

<td align="center"><button type="button" onclick="writeToScreen(this)" value=4>4</button></td>

Now to the question and to check whether my logic is right. Basically when I press on the button, the function writeToScreen is called, giving as parameter (this) the value 4 for the current button. The number 4 is now displayed in the screen of my calculator, but I don't see where the displaying is coming from. Is it from the getElementById('screen'). Is this function checking if 'screen' id is of input type and then displaying it? Where exactly is the displaying happening?

Thanks!

function writeToScreen(a) { var elem = document.getElementById('screen'); switch (a.value) { case '+': { if (firstOperation) { lastOperation = '+'; firstNumber = elem.value; elem.value = ""; firstOperation = 0; } else { lastOperation = '+'; firstNumber += elem.value; } } break; — user3240544
– user3240544, Commented Oct 26, 2014 at 16:07
You can edit your post and put the code in there where it won't be truncated :) — rossipedia
– rossipedia, Commented Oct 26, 2014 at 16:08
this is the element clicked. You pass it to the function, so now that element is referenced by the a parameter. When you do a.value, get fetches the current value of the element, which is 4 for that button. The elem variable refers to the screen input. You assign to its .value property in order to update the display. So every elem.value = "...whatever..." is updating the value of the screen element, and therefore its display. — user1106925
– user1106925, Commented Oct 26, 2014 at 16:11
...here's a simpler example. jsfiddle.net/340d7s9c So it has nothing to do with getElementById(). That's just a method for fetching an element from the DOM. Updating the .value of an input element will update its display. Note that most elements do not have a .value. Most other ones, like a <div> will have its content updated using .appendChild() or .textContent or other properties and methods. — user1106925
– user1106925, Commented Oct 26, 2014 at 16:19

Arnelle Balane · Accepted Answer · 2014-10-26 16:23:53Z

The line var elem = document.getElementById('screen') gets the element with id attribute set to screen, which in this case is an input element. Form elements (in which the input elements belong to) has an property called value which, as the name suggests, is the value of the element. This property can be accessed by doing formElement.value. This property is also writeable, which means that you can set its value programatically by doing formElement.value = theValue.

In your case, your elem variable is an input element, so you can get or set its value using the methods described above. So the lines which displays the value in your screen element are those lines where you do elem.value += ... or elem.value = "" (... here means any value).

CHAN · Accepted Answer · 2014-10-26 16:38:28Z

Dom Event Model
document.getElementById

<!-- when "click" event is triggered on this button/element, call writeToScreen --> <!-- with "this", the button element itself, as it's first argument --> <button type="button" onclick="writeToScreen(this)" value=4>

And the function...

// define a function, store the first arg as "a" function writeToScreen(a) { // define a local variable named "elem" // look for the element you want to manipulate by calling // "getElementById" of "document" with a string "screen" as it's only argument var elem = document.getElementById('screen'); // switch "value" of the clicked button element, which "a" is referring to switch (a.value) { ... case '4': { // if the button being clicked has a value === "4" elem.value += a.value; // set the value of "elem"(id="screen") += a.value

....Button "4" clicked, call writeToScreen, then make screen's value += 4, seems wrong LOL

Collectives™ on Stack Overflow

basic javascript getElementById clarification

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related