基本的javascript getElementById说明

basic javascript getElementById clarification

本文关键字：getElementById 说明 javascript      更新时间：2023-09-26

我不得不使用HTML和JS做一个简单的计算器，由于我从未在JS上编程过，所以我有一个问题要问，以获得正确的逻辑。这是代码：

我有一个函数，它必须写在我的计算器屏幕上；

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;
    }
}

这是我的计算器屏幕：

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

这是我计算的一个按钮：

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

现在来问这个问题，看看我的逻辑是否正确。基本上，当我按下按钮时，会调用函数writeToScreen，将当前按钮的值4作为参数（this）。数字4现在显示在我的计算器屏幕上，但我不知道显示是从哪里来的。它来自getElementById（"screen"）。此函数是否检查"screen"id是否为输入类型，然后显示它？展览究竟发生在哪里？

谢谢！

行var elem = document.getElementById('screen')获取id属性设置为screen的元素，在本例中为input元素。Form元素（input元素属于其中）具有一个名为value的属性，顾名思义，它是元素的值。可以通过执行formElement.value来访问此属性。此属性也是可写的，这意味着您可以通过执行formElement.value = theValue以编程方式设置其值。

在您的情况下，elem变量是一个输入元素，因此您可以使用上述方法获取或设置其值。因此，在screen元素中显示值的行是执行elem.value += ...或elem.value = ""的那些行（此处...表示任何值）。

Dom事件模型
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>

功能。。。

// 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

点击按钮"4"，调用writeToScreen，然后使屏幕的值+=4，似乎是错误的LOL

相关文章：