动态计算器Javascript

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

这是代码。

(
)
←
C
7.
8.
9
÷
....

JS:

var-keys=document.querySelectorAll（“.keys-span”）；
keys.onclick=函数（）{
对于（变量i=0；i

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

见：

---

这只是为了回答你的问题，但是你应该给数字一个类，比如“valueSpan”，给操作符一个类，比如“operatorSpan”，并根据这些类应用事件，这样按钮的行为就像你期望的计算器一样。

这应该让你开始。。您需要获取正在单击的跨度值，然后将其附加到结果字段中。要让这个计算器工作还有很多，但这会让你找到正确的方向

小提琴更新：

JavaScript（jQuery）：

var-keys=document.querySelectorAll（“.keys-span”）；
对于（变量i=0；i

键

是一个，因此您不能将

onclick

附加到该键上。您需要通过循环将其附加到该列表中的每个元素。要获得该值，可以简单地使用

this.innerHTML

---

使用JQuery将使您的生活更加轻松：

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

var v=“”，
最大长度=8，
register=document.getElementById（“register”）；
//为数字附加关键事件
var keys=document.queryselectoral（“.keys span”）；
对于（var i=0；l=keys.length，i

你有JS代码要显示吗？@putvande我更新了fiddle。我有一些。我试图在单击时查看它返回的内容，但它什么也不返回。问题没有用jquery标记。谢谢您的解决方案。但我知道如何在jQuery中实现它。问题是我不知道如何在本机JS中显示他的显示结果也在一个范围内。。这也会将其用作单击事件。应该使用。如下图所示。另外，你的小提琴链接不起作用，我在他的代码上尝试了你的代码，但运气不好。哦，复制并粘贴了错误的小提琴。修好了。正如我所说，我只是回答了一个问题，即当你点击一个跨度时，如何从中获取值。为了让它像普通的计算器一样工作，我不会像我在回答中所说的那样使用任何跨度单击事件。问题没有标记为jquery。至少我的解决方案可以使用Blazemonger。他问的问题也相当模糊，所以这是一个快速有效的解决方案（不像你否决的其他答案），我没有否决任何一个。和往常一样，标签在问题的下面清楚地显示出来。我只是推荐使用JQuery，并举例说明它的好处。OP的GeezOther评论说：谢谢你的解决方案。但我知道如何在jQuery中实现它。问题是我不知道如何使用本地jsAhh，对不起。没有看到：（因为当

onclick

函数被触发时，

i

中的

keys[i]

将等于

键。长度

不是当前索引。感谢您的解释！我需要我可以用很少的代码使整个事情像计算器一样工作，而其他人则认为，我的答案实际上像真正的计算器一样工作：请注意，算术不起作用，如果需要，我可以加上这两个；-）谢谢，但我想自己做：）很好的小项目！喜欢我希望我的例子有帮助！当然，这是非常有帮助的！

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

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

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

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

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

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

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

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

   }