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!

Answer 1

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

Answer 2

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).