Dynamical Calculator Javascript

Question

It is a calculator which has spans from which I want to take a values(1,2,3, etc.) and two fields: First for displaying what user is typing and the second is for result of calculation. The question how to get values so when I click on spans it will show it in the second field

Here is the code. 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);
    };
}

@putvande I updated fiddle. I have some. I tried to see what it returns when I click but it returns nothing — ovesyan, Aug 12 '14 at 15:28

score 1 · Accepted Answer · edited Aug 12 '14 at 15:34

1

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

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

keys is a NodeList so you cannot attach the onclick on that. You need to attach it to each element in that list by doing the loop. To get the value you can then simple use this.innerHTML.

Fiddle

edited Aug 12 '14 at 15:34

Blazemonger

90,923
26
142
180

answered Aug 12 '14 at 15:31

putvande

15,068
3
34
50

Because by the time the `onclick` function gets triggered, `i` in `keys[i]` will be equal to `keys.length` not the current index. – putvande Aug 12 '14 at 15:39

James · Answer 2 · 2014-08-12T15:37:43.747

0

You can set a click event on the span elements if you use JQuery. Eg:

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

See: http://jsfiddle.net/vb394983/6/

That's just to answer your question but you should really give the numbers a class such as "valueSpan" and the operators a class such as "operatorSpan" and apply the events based on these classes so that the buttons behave as you'd expect a calculator to.

edited Aug 12 '14 at 15:37

answered Aug 12 '14 at 15:28

James

4,146
1
20
35

Question is not tagged with jquery. – Blazemonger Aug 12 '14 at 15:29
Thanks for solution. But I know how to do it in jQuery. Problem is I don't know how to in native js – ovesyan Aug 12 '14 at 15:30
His display result is also in a span.. this would also use that as a click event. Should use .on like below. Also your fiddle link isn't working and I tried your code without luck on his code. – amazedinc Aug 12 '14 at 15:34
Oops copied and pasted the wrong fiddle. Fixed it. And as I said I was just answering the question, i.e how to get the value from a span when you click it. To get it behaving like a normal calculator I wouldn't use the event of any span click as I said in the answer. – James Aug 12 '14 at 15:39

score 0 · Answer 3 · answered Aug 12 '14 at 15:29

0

This should get you started.. you need to get the value of the span you are clicking and then append it into your result field. Lots more to get this calculator to work but this should get you pointed in the right direction.

Fiddle Update: http://jsfiddle.net/vb394983/3/

JavaScript (jQuery):

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

answered Aug 12 '14 at 15:29

amazedinc

418
3
16

Question is not tagged for jquery. – Blazemonger Aug 12 '14 at 15:33
At least my solution works Blazemonger. Also it was fairly vague what he was asking so this was a solution that worked quickly and effectively (unlike other answer you downvoted) – amazedinc Aug 12 '14 at 15:36
I didn't downvote any of them. And the tags are clearly indicated below the question, as always. – Blazemonger Aug 12 '14 at 15:36

MartinWebb · Answer 4 · 2014-08-12T15:53:18.553

0

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

   }

edited Aug 12 '14 at 15:53

answered Aug 12 '14 at 15:41

MartinWebb

1,998
1
13
15

I you need i can make the entire thing work like a calculator with very little code – MartinWebb Aug 12 '14 at 15:41
Whilst the rest argue, my answer actually works like a real calculator: Note the arithmetic does not work, if needed i can add that two ;-) – MartinWebb Aug 12 '14 at 15:44
Thanks but I want to do it by myself:) – ovesyan Aug 12 '14 at 15:50
Nice little project! enjoy I hope my example helped! – MartinWebb Aug 12 '14 at 15:51
Can I have your e-mail for some questions which could be? – ovesyan Aug 12 '14 at 17:39

score -1 · Answer 5 · answered Aug 12 '14 at 15:32

-1

Using JQuery will make your life much easier:

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

answered Aug 12 '14 at 15:32

J148

576
1
4
17

I was only recommending the use of JQuery and giving an example of its benefits. Geez – J148 Aug 12 '14 at 15:34
Other comment by OP says: _Thanks for solution. But I know how to do it in jQuery. Problem is I don't know how to in native js_ – putvande Aug 12 '14 at 15:36
Ahh, sorry. Didn't see that :( – J148 Aug 12 '14 at 15:37

Dynamical Calculator Javascript

5 Answers5

Linked