CODEWITHSUNDEEP
javascriptcalculator
RSD
RSD

Reputation: 55

javascript, calculator error?

i m new to javascript and i m trying to build a calculator using javascript. 

<form name="calc">
    <div class="screen"><input name="output" class="editscreen"></div>
    <div class="main-keys">
        <button name="del" value="" onClick="rundel()" class="btn2 btn-del">DEL</button>
        <button name="7" value="7" onClick="run7()" class="btn2 num">7</button>
        <button name="8" value="8" onClick="run8()" class="btn2 num">8</button>
        <button name="9" value="9" onClick="run9()" class="btn2 num">9</button>
        <button name="ac" value="ac" onClick="runac()" class="btn2 btn-ac">AC</button>
        <button name="minus" value="-" onClick="runminus()" class="btn2 btn-minus">-</button>
        <button name="4" value="4" onClick="run4()" class="btn2 num">4</button>
        <button name="5" value="5" onClick="run5()" class="btn2 num">5</button>
        <button name="6" value="6" onClick="run6()" class="btn2 num">6</button>
        <button name="multi" value="x" onClick="runmulti()" class="btn2 btn-multi">x</button>
        <button name="plus" value="+" onClick="runplus()" class="btn2 btn-plus">+</button>
        <button name="1" value="1" onClick="run1()" class="btn2 num">1</button>
        <button name="2" value="2" onClick="run2()" class="btn2 num">2</button>
        <button name="3" value="3" onClick="run3()" class="btn2 num">3</button>
        <button name="div" value="÷" onClick="rundiv()" class="btn2 btn-div">÷</button>
        <button name="ans" value="ans" onClick="runans()" class="btn2 btn-ans">ANS</button>
        <button name="0" value="0" onClick="run0()" class="btn2 num">0</button>
        <button name="dec" value="." onClick="rundec()" class="btn2 num">.</button>
        <button name="exp" value="exp" onClick="runexp()" class="btn2 btn-exp">EXP</button>
        <button name="eq" value="=" onClick="runeq()" class="btn2 btn-eq">=</button>
    </div>
</form>
<script>
    function run1()
     {document.calc.output.value += "1";}
    function run2()
     {document.calc.output.value += "2";}
    function run3()
     {document.calc.output.value += "3";}
    function run4()
     {document.calc.output.value += "4";}
    function run5()
     {document.calc.output.value += "5";}
    function run6()
     {document.calc.output.value += "6";}
    function run7()
     {document.calc.output.value += "7";}
    function run8()
     {document.calc.output.value += "8";}
    function run9()
     {document.calc.output.value += "9";}
    function run0()
         {document.calc.output.value += "0";}
    function rundec()
     {document.calc.output.value = ".";}
    function runplus()
     {document.calc.output.value = "+";}
    function runminus()
     {document.calc.output.value = "-";}
    function rundiv()
     {document.calc.output.value = "÷";}
    function runmulti()
     {document.calc.output.value = "x";}
    function rundel()
     {document.calc.output.value = "";}
</script>

when i click on any key, it's just blinking, how to solve it. and help me if there are other ways to build a calculator using javascript.

Upvotes: 1

Views: 600

Answers (2)

SpaceDog
SpaceDog

Reputation: 3269

OK, the reason it's not working is that the element is in a form, it looks like it's submitting the form when you click the button. You can avoid this by doing: 

onClick="run1(); return false;"

(and repeating it on all the buttons, or see that answer from dbrin)

Having said that, it's better not to make it a form at all, just have a surrounding div so your code starts like: 

<div id='calc'>    
    <div class="screen">
        <input id="output" class="editscreen"/>
    </div>
    <div class="main-keys">

(note I've changed name= to id=) then you can use document.getElementById(...) to get the value: 

function run2() {
    document.getElementById('output').value += "2";    
}

Finally you have a lot of duplication there, there's no need to have all the runX functions and it'll make life difficult when you need to change something in all of them. So look for ways to make it easier, as a start I'd look at: 

function addDigit(digit) {  
    document.getElementById('output').value += digit;     
}

and then call it like: 

<button name="2" value="2" onClick="addDigit(2)" class="btn2 num">2</button>

etc.

Now, instead of doing that you can go even more general. Inside of passing a literal digit into the function you can use the click event itself, then in the handler function (addDigit) you can click the button itself (it's the target of the event) and then get the value of that -- which is already set to the digit to be added. Doing that you can massively reduce the code above. You can look here for some background: http://www.quirksmode.org/js/introevents.html and then this answer provides an example: Javascript click event handler - how do I get the reference to the clicked item? -- that should start you off.

Upvotes: 1

dbrin
dbrin

Reputation: 15673

Your form is getting submitted. Add this to the form element to prevent submission:

<form name="calc" onSubmit="return false;">

Upvotes: 2

Related Questions