How do I convert an string to an Int which is came from the input of an button

Question

I need to convert the string from my innerHTML which are received by an button click (I'm making an calculator) If needed here is my JS:

window.onload = function () {
// your code here
var counter = document.getElementById("scherm");
    var optellen = document.getElementById("1");
    var buttons = document.getElementsByTagName("button");
    var operators = ["+", "-", "*", "/", "=", "C"]

    // maak for loop voor buttons 
    for(var i=0; i<buttons.length; i++)
    {
        buttons[i].addEventListener("click", screen);
    }

    //optellen.addEventListener("click", screen); //+ string + sting aan het einde als je wilt gaan uitrekenen doe je parseInt()

    function screen() {
        if( operators.indexOf(this.innerHTML) != -1)
        {   

            if( operators.indexOf(this.innerHTML) == 5)
            {
                document.getElementById("scherm").innerHTML="";
            }

        }
        else
        {

            counter.innerHTML += this.innerHTML;
        }

        console.log(this.innerHTML);

        //if(counter.innerHTML == this.inner)
        //counter.innerHTML = buttons.innerHTML;
        //
    }

};

as requested HTML: <div id="rekenmachine"> <header><p id="scherm"></p></header> <section id="knoppen"> <div class="row"> <button value="1">1</button> <button value="2" class="pos">2</button> <button value="3" class="pos">3</button> <button value="+" class="pos">+</button> </div> <div class="row"> <button value="">4</button> <button value="" class="pos">5</button> <button value="" class="pos">6</button> <button value="" class="pos">-</button> </div> <div class="row"> <button value="">7</button> <button class="pos">8</button> <button class="pos">9</button> <button class="pos">*</button> </div> <div class="row"> <button value="">C</button> <button value="" class="pos">0</button> <button value="" class="pos">=</button> <button value="" class="pos">/</button> </div> </section>

also do remember the [base in `parseInt()`](http://stackoverflow.com/a/3342079/3419997) — turtle, Nov 26 '14 at 10:24

score 0 · Answer 1 · answered Nov 26 '14 at 08:59

0

This should do it.

parseInt("10");

Source: http://www.w3schools.com/jsref/jsref_parseint.asp

answered Nov 26 '14 at 08:59

Alexus

942
7
20

Kornelito Benito · Answer 2 · 2014-11-26T09:34:53.960

0

have a look at this:

http://www.w3schools.com/jsref/jsref_parseint.asp

(you should do something like: parseInt(counter.innerHTML))

 else {
     var result;
     if(counter.innerHTML != "") { 
         result = parseInt(counter.innerHTML);
      } else {
          result = 0;
      } 
     result += parseInt(this.innerHTML); 
     counter.innerHTML = result; }

edited Nov 26 '14 at 09:34

answered Nov 26 '14 at 09:00

Kornelito Benito

1,067
1
17
38

got it like this now: `document.getElementById("scherm").innerHTML=parseInt(document.getElementById("scherm").innerHTML);` but it only inserts a NaN infront of the numbers – J.Dekkers Nov 26 '14 at 09:05
Thats not the correct approuch ;). Make sure the innerHTML is parsable. (Wich means only numerical values are present). It would be a lot easyer to explain in our language (Dutch), wich is against the rules :). You parse the values and calculate with them, if then put in another div (innerHTML), they are automaticcaly interpreted as a String again. – Kornelito Benito Nov 26 '14 at 09:08
Is it possible to add your HTML to your post? – Kornelito Benito Nov 26 '14 at 09:09
That really would be as its still a bit confusing to me the problem also is that with that line of code they dont add up to each other anymore. This site really needs an chat function – J.Dekkers Nov 26 '14 at 09:11
Okay, try something like this: In yourelse { counter.innerHTML += this.innerHTML; } Chane to this: else { var result = parseInt(counter.innerHTML); result += parseInt(this.innerHTML); this.innerHTML = result; } – Kornelito Benito Nov 26 '14 at 09:19
Now my buttons change to NaN – J.Dekkers Nov 26 '14 at 09:23
Got it like this now `else { var getal = parseInt(this.innerHTML); counter.innerHTML += this.innerHTML; } console.log(this.innerHTML); console.log(getal);` and it shows the int in the logs now but can i use it to calculate? – J.Dekkers Nov 26 '14 at 09:25
Good sign :). Now I see something: Your div id="scherm" is an empty div. You should first check if it's empty. I'm guessing you're in school right now? ;) else {var result; if(counter.innerHTML != "") { result = parseInt(counter.innerHTML);} else {result = 0;} result += parseInt(this.innerHTML); this.innerHTML = result; } – Kornelito Benito Nov 26 '14 at 09:27
edited the answer :). Look above. please accept this as an answer if it helped you :) – Kornelito Benito Nov 26 '14 at 09:36

Tien Nguyen · Answer 3 · 2014-11-26T10:06:38.443

0

You can try

Parsing function. Parsing will stop if hits a character than doesn't recognise. If parsing stop at first symbol then it returns NaN

parseInt("1") = 1
parseInt("1a") = 1
parseInt("a1") = NaN

Type changing.

Unary plus

+"1" = 1
+"1.231" = 1.231
+"1a" = NaN
+"a1" = NaN

Bitwise NOT

~~"1" = 1
~~"1.231" = 1
~~"a1" = 0
~~"1a" = 0
~~"a" = 0

Multiplication operator

"1" * 1 = 1
"1a" * 1 = NaN
"a1" * 1 = NaN
"a" * 1 = NaN

edited Nov 26 '14 at 10:06

answered Nov 26 '14 at 09:02

Tien Nguyen

599
4
13

Please add some explanation about your answer. – DontVoteMeDown Nov 26 '14 at 09:49

How do I convert an string to an Int which is came from the input of an button

3 Answers3