CODEWITHSUNDEEP
javascriptjqueryhtmlcss
forever4
forever4

Reputation: 13

Click on the same element but need different variables/value?

I'm trying to do a calculator and every time I click on different div with the same class, I'd like to be able to get different values too. For example, 

$('.numbers').click(function () {
    $('#result').append('<span class ="append">' + $(this).text() + '</span>');
    a = +$('.append').text();
});

I wanna do the same but getting different value so I can set it as var b.

Right now, I'm getting the same value showing up twice. Any idea?

My working Jsfiddle

Also, right now, whenever I click on number 1, it didn't convert to a number for some reason. Other numbers are fine though.

Updated.

Is there anyone smart enough to help me out with this?! I don't want to do array first off. Second off, I know why it shows double the number. I'd like it to stop at the first click, save that value to var a. Then second click will show new value and save it to var b.

Here's one that doesn't need to do array.

https://github.com/meherchandan/Calculator/blob/master/calculator.js

Upvotes: 1

Views: 102

Answers (5)

vineeth joyson
vineeth joyson

Reputation: 21

Try this. http://jsfiddle.net/y4jxvxub/11/

$(document).ready(function () {
    var a ;
    var b ;
    var result;
    $('.numbers').click(function () {
        $('#result').append('<span class ="append">' + $(this).text() + '</span>');
        if(a==undefined){
            a = parseInt($(this).text());
        } else {
            b = parseInt($(this).text());
        }
    });

    $('.operators').click(function () {
        switch ($(this).text()) {
            case '+':
                result = a + b;
                break;
            case '-':
                result = a - b;
                break;
            case 'x':
                result = a * b;
                break;
            case '÷':
                result = a / b;
                break;
            case '=':
                 $('.append').remove();
                $('#result').append('<span class="append">' + result + '</span>');
        }
    });
    $('#clear').click(function () {
        $('.append').remove();
    });
});

You can try this a small change in your code. You have to select the 2 single digit numbers first and then the operator and then "=".

Upvotes: 0

hieupt.vn
hieupt.vn

Reputation: 1

My little tweak, this is only good for simple math operations ... you need to spend more time for complex case like: 1 + 3 + 3 .... Hope this helps!

$(document).ready(function () {
    $.screen = $('#result');
    
    var a,c;
    $('.numbers').click(function () {
        $('#result').append('<span class ="append">' + $(this).text() + '</span>');
        b = +$('.append').text();        
    });
   
    $('.operators').click(function () {
        switch ($(this).text()) {
            case '+':
                operator='+';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '-':
                operator='-';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case 'x':
                operator='*';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '÷':
                operator='/';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '=':
                c= parseInt(b);
                $.screen.text(''); 
                if(operator=='+'){
                    $.screen.text(a+c);
                }else if(operator=='-'){
                    $.screen.text(a-c);
                }else if(operator=='*'){
                    $.screen.text(a*c);
                }else if(operator=='/'){
                    $.screen.text(a/c);                 
                }
                
        }
    });
    $('#clear').click(function () {
        $('#result').empty();
            
    });
});
.head {
    height: 125px;
    width: 130px;
    background: #9e532a;
    border-radius: 100%;
    margin: 20px auto;
    position: relative;
    border: 5px solid #63341a;
}
.eyes {
    height: 20px;
    width: 13px;
    background: black;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    top: 40px;
}
.ears {
    height: 40px;
    width: 40px;
    background: #9e532a;
    border-radius: 100%;
    border: 10px solid #63341a;
    top: -10px;
    z-index: -1;
    position: absolute;
    display: inline-block;
}
.left_ear {
    left: -20px;
}
.left_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear {
    right: -20px;
}
.right_eye {
    right: 30px
}
.left_eye {
    left: 30px;
}
.nose {
    height: 20px;
    width: 30px;
    background: #63341a;
    position: absolute;
    top: 70px;
    left: 49px;
    border-radius: 60%;
}
.nose_bridge {
    height: 15px;
    width: 3px;
    background: black;
    position: absolute;
    top: 20px;
    left: 13px;
}
.mouth {
    width: 60px;
    height: 10px;
    position: absolute;
    top: 90px;
    left: 33px;
    border-bottom: 5px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0 0 50px 50px;
}
.body {
    height: 450px;
    width: 300px;
    background: #63341a;
    position: absolute;
    top: 120px;
    left: -85px;
    z-index: -1;
}
.head:before {
    content:"";
    width: 400px;
    height: 40px;
    background: #63341a;
    position: absolute;
    top: 100px;
    z-index:-1;
    border-radius: 100%;
    left: -130px;
}
.body:after {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    right: 0;
    border-radius: 0 0 30px 30px;
}
.body:before {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    left: 0;
    border-radius: 0 0 30px 30px;
}
#result {
    height: 50px;
    width: 248px;
    background: white;
    position: absolute;
    top: 30px;
    left: 25px;
    box-shadow: 1px 1px 10px 1px black;
    line-height: 50px;
    font-size: 30px;
}
#calculator {
    width: 248px;
    position: absolute;
    top: 100px;
    left: 24px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}
.numbers {
    width: 61px;
    height: 62px;
    background: #D8D6D6;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.numbers:hover {
    background: #DDD2BE;
}
.operators {
    background: #F27B17;
    width: 61px;
    height: 62px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.operators:hover {
    background: orange;
}
/*#split {
  width: 61px;
  height: 62px;
  background: #D8D6D6;
  border-right: 1px  solid black;
  border-bottom: 1px  solid black;
  float: left;
  text-align: center;
  font-size: 30px;
  line-height: 62px;
}
 .append {
    float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="head">
            <div class="left_ear ears"></div>
            <div class="right_ear ears"></div>
            <div class="left_eye eyes"></div>
            <div class="right_eye eyes"></div>
            <div class="nose">
                <div class="nose_bridge"></div>
            </div>
            <div class="mouth"></div>
            <div class="body">
                <div id="result"></div>
                <div id="calculator">
                    <div class="numbers" id="n1">1</div>
                    <div class="numbers" id="n2">2</div>
                    <div class="numbers" id="n3">3</div>
                    <div class="operators" id="add">+</div>
                    <div class="numbers" id="n4">4</div>
                    <div class="numbers" id="n5">5</div>
                    <div class="numbers" id="n6">6</div>
                    <div class="operators" id="minus">-</div>
                    <div class="numbers" id="n7">7</div>
                    <div class="numbers" id="n8">8</div>
                    <div class="numbers" id="n9">9</div>
                    <div class="operators" id="multiply">x</div>
                    <div class="numbers" style="width: 123px" id="n0">0</div>
                    <div class="numbers split">.</div>
                    <div class="operators" id="divide">÷</div>
                    <div class="numbers" style="width:185px" id="clear">CLEAR</div>
                    <div class="operators equal">=</div>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Khoa Pham
Khoa Pham

Reputation: 16

Working as a normal calculator: http://jsfiddle.net/y4jxvxub/45/

$(document).ready(function () {
    var number=0, buffer="", result=0, operator="";
    
    $('.numbers').click(function () {
        $('#result').text($('#result').text() + $(this).text());
        buffer = buffer + $(this).text();
    });

    $('.operators').click(function () {

        number = parseFloat(buffer);
        buffer = "";

        switch (operator) {
            case '+':
                number = result + number;
                break;
            case '-':
                number = result - number;
                break;
            case 'x':
                number = result * number;
                break;
            case '÷':
                number = result / number;
                break;
        }
        operator = $(this).text();     
        result = number;
        
        $('#result').text($('#result').text() + operator);
        if ($(this).text()=='=') {
            buffer = result;
            $('#result').text(result);
        }
    });

    $('#clear').click(function () {
        number=0, buffer="", result=0, operator="";
        $('#result').text("");
    });
});

Upvotes: 0

lightbringer
lightbringer

Reputation: 835

working code without array, I tweaked your code a bit, since <span class="append"></span> is not necessary. http://jsfiddle.net/y4jxvxub/15/

Upvotes: 0

user3998237
user3998237

Reputation:

Forget my previous answer. The problem is that you have two identical functions. Delete the first one.

Here: http://jsfiddle.net/y4jxvxub/9/

Example:

    $(document).ready(function () {
    
        $('.numbers').click(function () {
            $('#result').append('<span class ="append">' + $(this).text() + '</span>');
            a = +$('.append').text();
    
        });
        
        $('.operators').click(function () {
            switch ($(this).text()) {
                case '+':
                    result = a + b;
                    break;
                case '-':
                    result = a - b;
                    break;
                case 'x':
                    result = a * b;
                    break;
                case '÷':
                    result = a / b;
                    break;
                case '=':
                    $('.append').remove();
                    $('#result').append('<span class="append">' + result + '</span>');
            }
        });
        $('#clear').click(function () {
            $('.append').remove();
        });
    });
.head {
    height: 125px;
    width: 130px;
    background: #9e532a;
    border-radius: 100%;
    margin: 20px auto;
    position: relative;
    border: 5px solid #63341a;
}
.eyes {
    height: 20px;
    width: 13px;
    background: black;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    top: 40px;
}
.ears {
    height: 40px;
    width: 40px;
    background: #9e532a;
    border-radius: 100%;
    border: 10px solid #63341a;
    top: -10px;
    z-index: -1;
    position: absolute;
    display: inline-block;
}
.left_ear {
    left: -20px;
}
.left_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear {
    right: -20px;
}
.right_eye {
    right: 30px
}
.left_eye {
    left: 30px;
}
.nose {
    height: 20px;
    width: 30px;
    background: #63341a;
    position: absolute;
    top: 70px;
    left: 49px;
    border-radius: 60%;
}
.nose_bridge {
    height: 15px;
    width: 3px;
    background: black;
    position: absolute;
    top: 20px;
    left: 13px;
}
.mouth {
    width: 60px;
    height: 10px;
    position: absolute;
    top: 90px;
    left: 33px;
    border-bottom: 5px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0 0 50px 50px;
}
.body {
    height: 450px;
    width: 300px;
    background: #63341a;
    position: absolute;
    top: 120px;
    left: -85px;
    z-index: -1;
}
.head:before {
    content:"";
    width: 400px;
    height: 40px;
    background: #63341a;
    position: absolute;
    top: 100px;
    z-index:-1;
    border-radius: 100%;
    left: -130px;
}
.body:after {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    right: 0;
    border-radius: 0 0 30px 30px;
}
.body:before {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    left: 0;
    border-radius: 0 0 30px 30px;
}
#result {
    height: 50px;
    width: 248px;
    background: white;
    position: absolute;
    top: 30px;
    left: 25px;
    box-shadow: 1px 1px 10px 1px black;
    line-height: 50px;
    font-size: 30px;
}
#calculator {
    width: 248px;
    position: absolute;
    top: 100px;
    left: 24px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}
.numbers {
    width: 61px;
    height: 62px;
    background: #D8D6D6;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.numbers:hover {
    background: #DDD2BE;
}
.operators {
    background: #F27B17;
    width: 61px;
    height: 62px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.operators:hover {
    background: orange;
}
/*#split {
  width: 61px;
  height: 62px;
  background: #D8D6D6;
  border-right: 1px  solid black;
  border-bottom: 1px  solid black;
  float: left;
  text-align: center;
  font-size: 30px;
  line-height: 62px;
}
 .append {
    float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="head">
            <div class="left_ear ears"></div>
            <div class="right_ear ears"></div>
            <div class="left_eye eyes"></div>
            <div class="right_eye eyes"></div>
            <div class="nose">
                <div class="nose_bridge"></div>
            </div>
            <div class="mouth"></div>
            <div class="body">
                <div id="result"></div>
                <div id="calculator">
                    <div class="numbers" id="n1"><span>1</span>

                    </div>
                    <div class="numbers" id="n2">2</div>
                    <div class="numbers" id="n3">3</div>
                    <div class="operators" id="add">+</div>
                    <div class="numbers" id="n4">4</div>
                    <div class="numbers" id="n5">5</div>
                    <div class="numbers" id="n6">6</div>
                    <div class="operators" id="minus">-</div>
                    <div class="numbers" id="n7">7</div>
                    <div class="numbers" id="n8">8</div>
                    <div class="numbers" id="n9">9</div>
                    <div class="operators" id="multiply">x</div>
                    <div class="numbers" style="width: 123px" id="n0">0</div>
                    <div class="numbers split">.</div>
                    <div class="operators" id="divide">÷</div>
                    <div class="numbers" style="width:185px" id="clear">CLEAR</div>
                    <div class="operators equal">=</div>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions