Question

我正在用JavaScript编写计算器：https://jsfiddle.net/or0sexp1/

我想编辑这个计算器，这样当按下 = 按钮时，输出会被添加到我的#history div

我目前在 = 按钮上有以下onclick事件：

$("#equal").click(function(){
    var str = $("#history").text();
    var re = /[0-9]+/g;
    var re2 = /[0-9]+(.)[0-9]+/;
    var operands = str.match(re);
    var Operation = str.match(re2)[1];
    var A = operands[0];
    var B = operands[1];
    var Result = operands[2];
});

我希望#history输出包含在<span>个元素中。

例如，如果输入为 5 - 1 = 4 我希望#history div更新如下：

<span id="A">5</span>
<span id="Operation">-</span>
<span id="B">1</span>
<span>=</span>
<span id="Result">4</span>

我目前的输出如下：

"5-1="
<span id="Result">4</span>

我试图在不使用 REGEX

的情况下实现这一目标

Answer 1

我对您的代码进行了一些更改。

$("#equal").click(function() {
    str = $("#history1").text();

    var re = /[0-9]+/g;
    var re2 = /[0-9]+(.)[0-9]+/;
    var operands = str.match(re);
    var Operation = str.match(re2)[1];
    var A = operands[0];
    var B = operands[1];
    var Result = operands[2];
    $("#history").append('<span id="A">' + operands[0] + '</span><span id="Operation">' + Operation + '</span><span id="B">' + operands[1] + '</span>=<span id="Result">' + $("#bar").val() + '</span>');
});

Demo Fiddle

我用更清洁的方式创建了一个计算器。

var operators = [];
$(".numbers,.operators,.dot").click(function() {
    $("#bar").val($("#bar").val() + $(this).val());
});
$(".operators").click(function() {
    operators.push($(this).val());
});
$("#equal").click(function() {
    var resultString = $("#bar").val();
    for (i = 0; i < operators.length; i++) {
        var div = $("<div/>");
        var firstIndex = resultString.indexOf(operators[i]);
        div.append("<span class='number'>" + resultString.substring(0, firstIndex) + "</span>");
        div.append("<span class='operator'>" + operators[i] + "</span>");
        resultString = resultString.substring(firstIndex + 1);
        operators.splice(i, 1);
    }
    div.append("<span class='number'>" + resultString + "</span>");
    div.append("<span>=</span>");
    $("#bar").val(eval($("#bar").val()));
    div.append("<span class='result'>" + $("#bar").val() + "</span>");
    $("#history").append(div);
});

Fiddle without using regex

如何在我的计算器中使用span标记接收结果

1 个答案: