JavaScript无法与Google Chrome扩展程序正确执行

Question

I've got the majority of it to work, but can't get my head around dynamically getting an ID of an element, and using that to input to a text box, which will be evaluated with eval() 我已经完成了大部分工作，但是无法动态获取元素的ID，并使用它来输入文本框，该文本框将通过eval（）求值。

HTML: 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: 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 = "";
    });
});

Manifest: 表现：

{
    "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"
    }
}

When I use OnClick attributes, everything works, and the JavaScript would get the ID and use that to know what to put in the textbox to be used by eval(). 当我使用OnClick属性时，一切正常，JavaScript将获取ID并使用该ID来知道要放在文本框中的内容，以供eval（）使用。 When I wrap them into the DOMContentLoaded event listener, it doesn't. 当我将它们包装到DOMContentLoaded事件侦听器中时，它不是。

Answer 1

From the looks of it the problem is in how you're adding event listeners to your buttons. 从外观上看，问题在于如何向按钮添加事件侦听器。 To access the id of the DOM element that triggers your anonymous function you can use the this keyword as such 要访问触发匿名功能的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;
});

Then you just need to attach an event listener to each button. 然后，您只需要在每个按钮上附加一个事件侦听器即可。 I quickly put this together to accomplish that here: http://jsfiddle.net/ZeDxe/ 我很快将它们放在一起以在此处完成该操作： http : //jsfiddle.net/ZeDxe/

Of course creating anonymous functions in a loop isn't great, but neither is eval ing the contents of a user editable input field. 当然，在循环中创建匿名函数并不是一件eval ，但是eval用户可编辑输入字段的内容也没有。

JavaScript无法与Google Chrome扩展程序正确执行

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-11-07 05:01:37

JavaScript无法与Google Chrome扩展程序正确执行

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-11-07 05:01:37

解决方案1
1 已采纳 2013-11-07 05:01:37