动态计算器 Javascript

Question

它是一个计算器，它具有我想从中获取值（1、2、3 等）的跨度和两个字段：第一个用于显示用户正在输入的内容，第二个用于计算结果。 如何获取值的问题，所以当我点击跨度时，它将显示在第二个字段中

这里是代码。 http://jsfiddle.net/ovesyan19/vb394983/2/

<span>(</span>
<span>)</span>
<span class="delete">←</span>
<span class="clear">C</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span class="operator">÷</span>
....

JS：

var keys = document.querySelectorAll(".keys span");

keys.onclick = function(){
    for (var i = 0; i < keys.length; i++) {
        alert(keys[i].innerHTML);
    };
}

Answer 1

var keys = document.querySelectorAll(".keys span");

for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function(){
        alert(this.innerHTML);
    }
}

keys 是NodeList，因此您不能在其上附加onclick。您需要通过循环将其附加到该列表中的每个元素。要获得价值，您可以简单地使用this.innerHTML。

Fiddle

Answer 2

这应该可以帮助您入门.. 您需要获取您单击的跨度的值，然后将其附加到您的结果字段中。让这个计算器工作还有很多事情要做，但这应该会让你指向正确的方向。

小提琴更新：http://jsfiddle.net/vb394983/3/

JavaScript (jQuery)：

$(".keys").on("click","span",function(){
    var clickedVal = $(this).text();
    $(".display.result").append(clickedVal);
});

Answer 3

如果您使用 JQuery，您可以在 span 元素上设置点击事件。 例如：

$("span").click(
    function(){
        $("#calc").val($("#calc").val() + $(this).text());
    });

见： http://jsfiddle.net/vb394983/6/

这只是为了回答你的问题，但你真的应该给数字一个诸如“valueSpan”之类的类，给操作符一个诸如“operatorSpan”之类的类，并基于这些类应用事件，以便按钮的行为与你一样期待计算器。

Answer 4

http://jsfiddle.net/vb394983/7/

   var v="",
   max_length=8,
   register=document.getElementById("register");
   // attach key events for numbers   
   var keys = document.querySelectorAll(".keys span");
   for (var i = 0; l = keys.length, i < l; i++) {
       keys[i].onclick = function(){
            cal(this);
       } 
   };
   // magic display number and decimal, this formats like a cash register, modify for your own needs.
   cal = function(e){

        if (v.length === self.max_length) return;
        v += e.innerHTML;
        register.innerHTML = (parseInt(v) / 100).toFixed(2);

   }

Answer 5

使用 JQuery 会让您的生活更轻松：

$('.keys span').click(function() {
    alert(this.innerHTML);
});