Quantcast
Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
    1. Welcome to GTAForums!

    1. GTANet.com

    1. GTA Online

      1. The Cayo Perico Heist
      2. Find Lobbies & Players
      3. Guides & Strategies
      4. Vehicles
      5. Content Creator
      6. Help & Support
    2. Red Dead Online

      1. Frontier Pursuits
      2. Find Lobbies & Outlaws
      3. Help & Support
    3. Crews

    1. Red Dead Redemption 2

      1. PC
      2. Help & Support
    2. Red Dead Redemption

    1. Grand Theft Auto Series

      1. St. Andrews Cathedral
    2. GTA VI

    3. GTA V

      1. Guides & Strategies
      2. Help & Support
    4. GTA IV

      1. The Lost and Damned
      2. The Ballad of Gay Tony
      3. Guides & Strategies
      4. Help & Support
    5. GTA San Andreas

      1. Guides & Strategies
      2. Help & Support
    6. GTA Vice City

      1. Guides & Strategies
      2. Help & Support
    7. GTA III

      1. Guides & Strategies
      2. Help & Support
    8. Portable Games

      1. GTA Chinatown Wars
      2. GTA Vice City Stories
      3. GTA Liberty City Stories
    9. Top-Down Games

      1. GTA Advance
      2. GTA 2
      3. GTA
    1. GTA Mods

      1. GTA V
      2. GTA IV
      3. GTA III, VC & SA
      4. Tutorials
    2. Red Dead Mods

      1. Documentation
    3. Mod Showroom

      1. Scripts & Plugins
      2. Maps
      3. Total Conversions
      4. Vehicles
      5. Textures
      6. Characters
      7. Tools
      8. Other
      9. Workshop
    4. Featured Mods

      1. Design Your Own Mission
      2. OpenIV
      3. GTA: Underground
      4. GTA: Liberty City
      5. GTA: State of Liberty
    1. Rockstar Games

    2. Rockstar Collectors

    1. Off-Topic

      1. General Chat
      2. Gaming
      3. Technology
      4. Movies & TV
      5. Music
      6. Sports
      7. Vehicles
    2. Expression

      1. Graphics / Visual Arts
      2. GFX Requests & Tutorials
      3. Writers' Discussion
      4. Debates & Discussion
    1. Announcements

      1. GTANet 20th Anniversary
    2. Support

      1. Court House
    3. Suggestions

[TUT]Online calculator


Edmachine

Recommended Posts

Hello! This is a tutorial on how to make an online calculator using HTML and JavaScript.

 

 

Create a new HTML or PHP document. Or open an existing one.

 

Write this:

 

 

<form name=calc>

 

 

That starts our form. It is required for the JavaScript to work.

 

Then, lets make a table. I am going to show the whole layout of the table (not what to write in).

 

 

Change # to your number

 

<table border=#><tr><td colspan=3 width=75%></td><td width=25%></td></tr><tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr><tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr><tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr><tr><td width=25%></td><td width=25%></td><td width=25%></td><td width=25%></td></tr></table>

 

That is how our table looks like. You can upload the file to your server (if you have one).

 

Ok, now for our 'display', which will display the result, and what you want to calculate.

 

 

<tr><td colspan=3  width=75%><input name="wtcalc" type="text"></td><td width=25%></td></tr>

 

 

Now, the 1, 2, 3, etc buttons.

 

You must change it for every number or sign.

 

 

<input type="button" onClick="document.calc.wtcalc.value+='#'" value="#" name="#" title="#">

 

And replace # with your number. Or sign.

 

Now the columns should look like this (in the code):

 

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='2'" value="2" name="2" title="2" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='3'" value="3" name="3" title="3" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='+'" value="+" name="+" title="+" ></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='4'" value="4" name="4" title="4" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='5'" value="5" name="5" title="5" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='6'" value="6" name="6" title="6" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='-'" value="-" name="-" title="-" ></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='7'" value="7" name="7" title="7" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='8'" value="8" name="8" title="8" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='9'" value="9" name="9" title="9" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='*'" value="*" name="*" title="*" ></td></tr>

 

 

Now, I'll write the last row.

 

 

<tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='.'" value="." name="." title="." ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='0'" value="0" name="0" title="0" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=eval(calc.wtcalc.value);" value="="></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='/'" value="/" name="/" title="/" ></td></tr>

 

 

As you probably noticed, the = sign has a different onClick value.

 

But wait, we still need the C button, don't we?

 

 

<tr><td colspan="3" width="75%"><input name="wtcalc" type="text"></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C"></td></tr>

 

Replace that, with the first line.

 

Full code:

 

<form name=calc><table><tr><td colspan="3" width="75%"><input name="wtcalc" type="text"></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C"></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='2'" value="2" name="2" title="2" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='3'" value="3" name="3" title="3" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='+'" value="+" name="+" title="+" ></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='4'" value="4" name="4" title="4" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='5'" value="5" name="5" title="5" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='6'" value="6" name="6" title="6" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='-'" value="-" name="-" title="-" ></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='7'" value="7" name="7" title="7" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='8'" value="8" name="8" title="8" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='9'" value="9" name="9" title="9" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='*'" value="*" name="*" title="*" ></td></tr><tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='.'" value="." name="." title="." ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='0'" value="0" name="0" title="0" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=eval(calc.wtcalc.value);" value="="></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='/'" value="/" name="/" title="/" ></td></tr></table></form>

 

 

And, that is it smile.gif. Hope you enjoyed this tutorial smile.gif.

 

P.S. Do not press [Enter] to calculate. Press the = sign. smile.gif

Edited by Edmachine
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 2 Users Currently Viewing
    0 members, 0 Anonymous, 2 Guests

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.