Question

我已经完成了大部分工作，但无法动态获取元素的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事件侦听器中时，它不会。

Answer 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也不是用户可编辑输入字段的内容。

JavaScript无法通过Google Chrome扩展程序正常执行

1 个答案: