javascript - 使用事件处理程序的简单 JavaScript 计算器

标签 javascript html calculator

所以我是 javascript 的新手,我正在练习事件处理程序。我在按下按钮时创建了事件处理程序,但没有任何反应。我试图在网上查看计算器,但它们都在使用 jquery 或内联 js!我想避免这些,因为我想在事件处理程序方面做得更好。这是我正在处理按钮 0 的代码,id 为“n0:

<!DOCTYPE html>
<html>
    <head>
        <title>
            My Javascript Calculator
        </title>
    </head>

    <body>
        <div id="calculator">
            <input type="text" name="display" disabled>
            <br>
            <div id="keypad">
                <button id="clrEntry">CE</button>
                <button id="clear">C</button>
                <button id="divide">/</button>
                <button id="multiply">*</button>
                <br>
                <button id="n1">1</button>
                <button id="n2">2</button>
                <button id="n3">3</button>
                <button id="add">+</button>
                <br>
                <button id="n4">4</button></button>
                <button id="n5">5</button>
                <button id="n6">6</button>
                <button id="subtract">-</button>
                <br>
                <button id="n7">7</button>
                <button id="n8">8</button>
                <button id="n9">9</button>
                <button id="equal">=</button>
                <br>
                <button id="n0">0</button>
            </div>
        </div>
        <script src="calculator.js"></script>
    </body>
</html>

这里是calculator.js的内容:

    function init()
    var memory;
    {
        document.getElementById('n0').addEventListner("click", number0);

    }

function number0()
    {
        document.getElementById('display').value += 0;
        memory += 0;
        return 0;
    }

window.addEventListner("load", init, false);

最佳答案

多个问题:

  1. addEventListener 拼写错误。
  2. var memory 需要在 init() 函数定义之前,而不是它所在的位置。
  3. 0 按钮只有一个事件监听器
  4. 没有元素带有 id="display"

通常,您必须学会查看浏览器中的错误控制台,因为所有这些语法和运行时错误都会显示在错误控制台中。

关于javascript - 使用事件处理程序的简单 JavaScript 计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31552149/

相关文章:

javascript - 在我选择一个值后,更改问题仍然存在

javascript - 更改圆环图的边框颜色

javascript - 传递一个随机 ID 作为参数

javascript - 使用 javaScript 设置 HTML 属性值

Java - 总是0?

javascript - 在不使用 .math 或 .pow 函数的情况下制作计算指数/幂的计算器时需要帮助。使用循环

javascript - LibGDX html 剪贴板

javascript - 检测是否编辑了 html 表单的通用方法

javascript - 根据 cookie 的存在突出显示按钮

algorithm - 为什么后缀(rpn)表示法比前缀更常用?