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、ユーザーが編集可能な入力フィールドの内容を ing することもできません。

于 2013-11-07T05:01:37.680 に答える