Create an object after a button is pressed

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • risk32
    New Member
    • Mar 2008
    • 98
    #1

    Create an object after a button is pressed

    Hi all,
    I'm still in the beginning stages of JS, so I really don't know how to do this.
    I'm trying to create a calculator, which I did, but I couldn't get the % to work.
    I thought maybe I could use the operator(s) to invoke some kind of function to put what was typed into a variable and then create a new variable for the next numbers instead of just evalutating one big string at the beginning.

    Here's where my head is right now:

    Code:
    <script type="text/javascript">
var num[i] 
num[i] = document.calc.input.value
function add() {
if (i > 0) {
     ...
}

else {
     alert('There is nothing to add')
     }
}

 Honestly, I have no idea what I'm doing here. I'm trying to get it to create a new num when an operator button is pressed, hold the value of the text box, then clear the text box for the next number. Pretty much like a desk calculator or the one used with Windows.

</script>

<html>
( just for reference.. there's a lot more but I'm using a diff computer to type this)
<form name="calc">
<input type="text" name="input">
<input type="button" value="+" id="operator" onClick="add()">
</html>
    Does anyone know where I can find some material on how to do this or can point me in the right direction?

    Thanks,
    Adam
    Tags: None
    • larztheloser
      New Member
      • Jan 2010
      • 86
      #2
      Hi Adam,
      The windows calculator stores 2 numbers - input and operator. No need for the array - you are over-complicating things.

      Try doing this:
      Code:
      <html><body><form>
<input type="text" name="display"><br>
<input type="button" value="+" id="operator" onClick="add()">
<input type="button" value="-" id="operator" onClick="minus()">
<input type="button" value="X" id="operator" onClick="times()">
<input type="button" value="/" id="operator" onClick="divide()">
<input type="button" value="=" id="operator" onClick="equals()">
</form>
<script type="text/javascript">
oldValue=0;
operator="nothing";
textField=document.forms[0].display;
function add()
{
operator="add";
oldValue=parseInt(textField.value);
textField.value="";
}
function minus()
{
operator="minus";
oldValue=parseInt(textField.value);
textField.value="";
}
function times()
{
operator="times";
oldValue=parseInt(textField.value);
textField.value="";
}
function divide()
{
operator="divide";
oldValue=parseInt(textField.value);
textField.value="";
}
function equals()
{
if(operator=="add")
{
result=parseInt(textField.value)+oldValue;
}
else if(operator=="minus")
{
result=parseInt(textField.value)-oldValue;
}
else if(operator=="times")
{
result=parseInt(textField.value)*oldValue;
}
else if(operator=="divide")
{
result=parseInt(textField.value)/oldValue;
}
else
{
result=textField.value;
}
textField.value=result;
}
</script></body></html>
      I think this should work (haven't used the parseInt function in a while - it converts strings to numbers). Hope this helps.

      Regards,
      Lars

        Comment

        • risk32
          New Member
          • Mar 2008
          • 98
          #3
          Lars,
          It seems to work just fine. I'm trying to add the % function though. I know what it should look like in my head, but I can't seem to figure out using the code you gave me.
          Code:
          result = parseString(textField.value)/100 + (whatever the operator is) + oldValue;

result = eval(result)

result = parseInt(result)
          Could be wrong though...

          Thanks,
          Adam
          Last edited by gits; Jan 17 '10, 09:45 AM. Reason: added code tags

            Comment

            • larztheloser
              New Member
              • Jan 2010
              • 86
              #4
              Hi again,
              By % you mean modulus or percent? The javascript % operator means modulus (remainder). I take it, however, that you mean percent - if you mean modulus just use % in place of + or -.

              To convert a decimal to percent, the formula is d*100. So 0.56 is 56%. If you meant for a function where you input a number and a percent and figure out a percent of that number - ie 56 percent of 200 is 112 - here is the the code:
              Code:
              function percent()
{
operator="percent";
oldValue=parseInt(textField.value);
textField.value="";
}

and

else if(operator=="percent")
{
result=parseInt(textField.value)/100*oldValue;
}
              Remember to input the percent first, then the number you want to use.
              Regards,
              Lars
              Last edited by gits; Jan 17 '10, 09:45 AM. Reason: added code tags

                Comment

                • risk32
                  New Member
                  • Mar 2008
                  • 98
                  #5
                  I get how to do it now, but it's not quite right. I added oldValue = oldValue + result to the end with the declaration being result=0. Maybe something I didn't need, but it's a piece of mind thing when I can see it. Anyways, I added some numbers together and it worked like a charm. Then I tried the percent...
                  5+5+10+15 (no big deal... came out to 35)
                  5 + 5 + 1 0 + 15 + 10% (NaN)

                  This what got me thinking... a calculator will display the result, even if the equals sign hasn't been pressed. Could it be possible to add a result section to the function itself that does the operation?

                    Comment

                    • larztheloser
                      New Member
                      • Jan 2010
                      • 86
                      #6
                      OK, try this:

                      Code:
                      oldValue=0;
operator="nothing";
textField=document.forms[0].display;
function add()
{
operator="add";
oldValue+=parseInt(textField.value);
textField.value=oldValue;
}
function minus()
{
operator="minus";
oldValue-=parseInt(textField.value);
textField.value=oldValue;
}
function times()
{
operator="times";
oldValue=oldValue*parseInt(textField.value);
textField.value=oldValue;
}
function divide()
{
operator="divide";
oldValue=oldValue/parseInt(textField.value);
textField.value=oldValue;
}
function percent()
{
operator="percent";
oldValue=oldValue/100*parseInt(textField.value);
textField.value=oldValue;
}
function equals()
{
if(operator=="add")
{
result=parseInt(textField.value)+oldValue;
}
else if(operator=="minus")
{
result=parseInt(textField.value)-oldValue;
}
else if(operator=="times")
{
result=oldValue/parseInt(textField.value);
}
else if(operator=="divide")
{
result=oldValue/parseInt(textField.value);
}
else if(operator=="percent")
{
result=oldValue/100*parseInt(textField.value);
}
else
{
result=textField.value;
}
textField.value=result;
oldValue=0;
operator="nothing";
}
                      Think this does what you want it to.

                      Then test it by typing 5 X 5 X 4 % 20 = (result should be 20). Remember that to use the % sign in my calculator you input the value first (what 100% should be), then press the % sign and enter a percent, then press equals.

                      And by the way, sorry for posting that slightly buggy code earlier. This could actually be compacted using the eval function but it would be difficult to read. Hopefully I've at least given you the basic idea!

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          just a note: the entire code until now will only really accept integer values (for example: parseInt(2.5) = 2) in case you want to use decimal numbers then replace the parseInt() method with the parseFloat() method ... you could even add a precision handling by using some built in Math functions (round, ceil, floor) and/or the toFixed() method ...

                          kind regards

                            Comment

                            • risk32
                              New Member
                              • Mar 2008
                              • 98
                              #8
                              Lars,
                              Looks like I got it to work with some tweaking. I kind of gave up on the percent thing. Sorry for making you go through all that trouble.

                              The code I used to get the result to work like a normal calculator is:
                              Code:
                              function opAdd()
{
string1 = string.value
operator = "+"
string1 = parseFloat(string1) // thanks to gits for this one!
string.value = ""

function opEquals()
{
if (count <= 0)
{
result = eval(string.value + operator + string1)
string1 = string.value
string.value = result
}

if(count >=1)
{
result = eval(result + operator + string1)
string.value = result
}

count++
}
                              Thanks again for all the help Lars,
                              Adam

                                Comment

                                Previous template Next
                                Working...