0

我已经完成了大部分工作，但无法动态获取元素的 ID，并使用它来输入文本框，该文本框将使用 eval() 进行评估

HTML：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="javascript/javascript.js"></script>
        <link href="styles/style.css" rel="stylesheet" type="text/css">
        <title>title</title>
    </head>
    <body>
        <div id="wrapper">
            <input type="text" id="outputBox">
            <div id="buttons">
                <button type="button" id="1" class="number">1</button>
                <button type="button" id="2" class="number">2</button>
                <button type="button" id="3" class="number">3</button>
                <button type="button" id="4" class="number">4</button>
                <button type="button" id="5" class="number">5</button>
                <button type="button" id="6" class="number">6</button>
                <button type="button" id="7" class="number">7</button>
                <button type="button" id="8" class="number">8</button>
                <button type="button" id="9" class="number">9</button>
                <button type="button" id="0" class="number">0</button>
                <button type="button" class="resize" id="reset">Clear</button>
            </div>
            <div id="operatordiv">
                <button type="button" id="+" class="operators">+</button>
                <button type="button" id="-" class="operators">-</button>
                <button type="button" id="*" class="operators">*</button>
                <button type="button" id="/" class="operators">/</button>
                <button type="button" id="calculate" class="operators">=</button>
            </div>

        </div>
    </body>
</html>

JavaScript：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById(id).addEventListener('click', function(){
        print = document.getElementById(id).id;
        var text = document.getElementById("outputBox").value;
        document.getElementById("outputBox").value = text + print;
    });

    document.getElementById("calculate").addEventListener('click', function(){
        var str = document.getElementById("outputBox").value;
        var n = eval(str);
        document.getElementById("outputBox").value = n;
    });

    document.getElementById("reset").addEventListener('click', function(){
        document.getElementById("outputBox").value = "";
    });
});

显现：

{
    "name": "Calculator",
    "version": "1.0",
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "manifest_version": 2,

    "description": "testcalc",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "index.html"
    }
}

当我使用 OnClick 属性时，一切正常，JavaScript 将获取 ID 并使用它来知道要在文本框中放入什么以供 eval() 使用。当我将它们包装到 DOMContentLoaded 事件侦听器中时，它不会。

4

1 回答 1

1

从外观上看，问题在于您如何向按钮添加事件侦听器。要访问触发匿名函数的 DOM 元素的 id，您可以使用this关键字

document.getElementById(id).addEventListener('click', function(){
    var print = this.id;
    var text = document.getElementById("outputBox").value;
    document.getElementById("outputBox").value = text + print;
});

然后你只需要为每个按钮附加一个事件监听器。我很快把它放在一起来完成它：http: //jsfiddle.net/ZeDxe/

当然，在循环中创建匿名函数并不好，但eval用户可编辑输入字段的内容也不是很好。

于 2013-11-07T05:01:37.680 回答