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

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

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

请参阅： http://jsfiddle.net/vb394983/6/

这只是为了回答你的问题，但你应该给这些数字一个类，例如＆＃34; valueSpan＆＃34;和操作员一样，如＃34; operatorSpan＆＃34;并根据这些类应用事件，以便按钮的行为与您期望计算器一样。

Answer 3

这应该让你开始..你需要获得你点击的跨度的值，然后将它附加到你的结果字段中。还有更多让这个计算器工作，但这应该让你指向正确的方向。

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

JavaScript（jQuery）：

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

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);
});

动态计算器Javascript

5 个答案: