Question

我创建了一个简单的输入框，用户可以输入一个简单的等式（无变量）

例如，用户将输入

（5 + 6）* 7 -2

当用户点击“Calculate”按钮时，它会触发jQuery，它使用.toString（）转换输入，然后将该值转换为元素。

我比较新，所以如果我犯了非常糟糕的错误，我会道歉。我希望我已经妥善解释了这一点。

这是HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Interview exercise</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <input name = "equation"/> = <span id="answer"/>
    <br/>
    <button>Calculate</button>
</body>
</html>

这是JavaScript / jQuery

$(document).ready(function() {
    $('button').click(function() {
        var answer = $("input[name=equation]").toString();
        $('#answer') = answer;
    });
});

Answer 1

我不了解JavaScript eval()功能非常感谢@nnnnnn和@DanielA.White之间的争论！

关于eval() 不安全：
这是另一个SO answer to explain the risks，在您的情况下，它是不存在的。

所以这是HTML的计算函数：

$(document).ready(function(){
    $('button').click(function(){
        var answer = eval( $("input[name='equation']").val() );
        $('#answer').html(answer);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="equation" value="(5+6) * 7 -2"> = <span id="answer"></span>
<br>
<button>Calculate</button>

<小时/> 的修改
使.val()函数更安全 ...
但主要是为了防止不可能的计算，这里有更新！

这个细长的脚本过滤掉键盘上的“允许键”。

然而，如果输入了不可能的计算，例如4//(68+()，
它输出：«你的等式中出了点问题。»

$(document).ready(function(){
    var allowedKeys=[48,49,50,51,52,53,54,55,56,57, // 0 to 9 (keyboard)
                     96,97,98,99,100,101,102,103,104,105, // 0 to 9 (numpad)
                     111,106,109,107,110,    // characters / * - + . (numpad)
                     189,190,8,32,13    // character - . [backspace] [space] [enter] (keyboard)
                    ];
    var allowedShiftKeys=[51,56,57,48,187,57,48,16];  // characters / * + ( ) [shift] (keyboard + shift)

    $("input[name='equation']").on("keydown",function(e){
        // Clear previous answer
        $('#answer').html("");

        // Check for allowed keydown
        if( ($.inArray( e.which,allowedKeys) != -1 && !e.shiftKey) || ($.inArray(e.which,allowedShiftKeys)!=-1 && e.shiftKey) ){
            console.log("Allowed key.");
        }else{
            // Don't print the key in the input field.
            console.log("Disllowed key.");
            e.preventDefault();

            // Helper to find key number
            console.log(e.which);
        }

        // [enter] handler to simulate a button click.
        if(e.which==13){
            $('button').click();
        }
    });

    $('button').click(function(){
        var InputtedValue = $("input[name='equation']").val();
        
        // Remove "//" sequence... Which has the special meaning of a "comment start".
        // Has to be removed before eval() works.
        for(i=0;i<InputtedValue.length;i++){
            var position = InputtedValue.indexOf("//");
            if(position!=-1){
                console.log('Removing "//" occurance.');
                InputtedValue = InputtedValue.replace("//","/");
                // Redo the loop from start.
                i=0;
                $("input[name='equation']").val(InputtedValue);
            }
        }

        // Try the eval() function... And catch the error if any (Error will come from the inputted formula).
        // Prevents the script from just jamming here.
        try{
            var answer = eval( InputtedValue );
        }
        catch(error){
            console.log("ERROR: "+error.message);
        }

        // If there is an answer.
        if(typeof(answer)==="number"){
            $('#answer').html(answer);
        }else{
            $('#answer').html("Something is wrong in your equation.");
        }
        console.log("Answer: "+answer);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="equation" value="(5+6) * 7 -2"> = <span id="answer"></span>
<br>
<button>Calculate</button>

为什么我的jQuery不返回我的等式的值？

1 个答案: