Javascript错误 - 入门

时间:2014-07-07 19:48:50

标签: javascript html

我刚刚开始使用Javascript,我正在尝试设计一个使用Javascript的简单网站。目前我正在研究计算器,当我加载我的网站时,什么都没有启动,我没有任何错误。我已经尝试过HTML / chrome之外的代码,但代码错误也是如此。如果有人可以帮助我,将非常感激。这是我的HTML文档:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div class="title">
            <h1>
                This is a Test Environment for JavaScript
            </h1>
            <h2 id="Display">
                *Null*
            </h2>
        </div>
        <div class = "body">
            <div class="buttons">
                <div class = "row1">
                    <button onclick = "calc.addNum(1)"> 1</button>
                    <button onclick = "calc.addNum(2)"> 2</button>
                    <button onclick = "calc.addNum(3)"> 3</button>
                    <button onclick = "calc.add()"> +</button>
                </div>
                <div class = "row2">    
                    <button onclick = "calc.addNum(4)"> 4</button>
                    <button onclick = "calc.addNum(5)"> 5</button>
                    <button onclick = "calc.addNum(6)"> 6</button>
                    <button onclick = "calc.subtract()"> -</button>
                </div>
                <div class = "row3">
                    <button onclick = "calc.addNum(7)"> 7</button>
                    <button onclick = "calc.addNum(8)"> 8</button>
                    <button onclick = "calc.addNum(9)"> 9</button>
                    <button onclick = "calc.multiply()"> *</button>
                </div>
                <div class = "row4">
                    <button onclick = "calc.addNum(0)"> 0</button>
                    <button onclick = "calc.divide()"> /</button>
                    <button onclick = "calc.calculate()"> =</button>
                </div>
            </div>
         </div>

    <script>
        var calc =
        {
            var first,
            var operator: null,
            var second,
            var result,
            var Displayer = document.getElementById("display")
        };
        calc.addNum = function(number)
        {
            alert(number);
            if(operator == null)
            {
                this.first = this.first.concat(number);
            }
            else
            {
                this.second = this.second.concat(number);
            }
            Displayer.innerHTML = first + operator + second;
        };
        calc.add = function()
        {
            this.operator = "add";
        };
        calc.subtract = function()
        {
            this.operator = "subtract";
        };
        calc.divide = function()
        {
            this.operator = "divide";
        };
        calc.multiply = function()
        {
            this.operator = "muliply";
        };
        calc.calculate = function()
        {
            switch(operator)
            {
            case "add":
                this.result = this.first + this.second;
                break;
            case "subtract":
                this.result = this.first - this.second;
                break;
            case "subtract":
                this.result = this.first / this.second;
                break;
            case "muliply":
                this.result = this.first * this.second;
                break;
            default: 
                alert("You need to set an operator");
                break;
            }
            Displayer.innerHTML = this.result;
            this.operator = null;
        };

        window.onload = calc
    </script>
</body>

有一个CSS文档随之而来,但没有必要。我注释掉了它的链接。

1 个答案:

答案 0 :(得分:2)

var calc = {
    var first,
    var operator: null,
    var second,
    var result,
    var Displayer = document.getElementById("display")
}

应该是

var calc = {
    first     : undefined,
    operator  : null,
    second    : undefined,
    result    : undefined,
    Displayer : document.getElementById("display")
}