Simple Calculator Example

A simple calculator example, useful as a template.

by David Roman-Halliday

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Calculator Example</title>
  </head>

  <body>
    <h1>Calculator Example</h1>
    <form name="f_inputs" action="null">
      <fieldset>
        <legend>Input</legend>
        <p>
          <label for="input_a">Input A: </label>
          <input name="input_a" type="number" value="10">
        </p>
        <p>
          <label for="input_b">Input B: </label>
          <input name="input_b" type="number" value="5">
        </p>

      </fieldset>
    </form>

    <p>
      <input id ="runButton" type="button" name="run" value="Run Calculations">
    </p>

    <form name="f_outputs" action="null">
      <fieldset>
        <legend>Output</legend>
        <p>
          <label for="output_a">Output A: </label>
          <input name="output_a" type="number" value="0">
        </p>
        <p>
          <label for="output_b">Output B: </label>
          <input name="output_b" type="text" value="0">
        </p>
        <p>
          <label for="output_c">Output C: </label>
          <input name="output_c" type="number" value="0">
        </p>
        <p>
          <label for="output_d">Output D: </label>
          <input name="output_d" type="number" value="0">
        </p>
        <p>
          <label for="output_e">Output E: </label>
          <input name="output_e" type="number" value="0">
        </p>

      </fieldset>
    </form>
    <h1>Notes</h1>
    <ul>
      <li>Output B is a text field, the others are formatted as numbers.</li>
      <li>I have used the "onChange" attribute for the inputs to trigger the calculation</li>
    </ul>
  </body>

</html>

JavaScript

var runButton = document.getElementById("runButton");

runButton.onclick = function(){
	//Get Inputs
  var my_var_a = document.forms['f_inputs']['input_a'].value;
  var my_var_b = document.forms['f_inputs']['input_b'].value;

  document.forms['f_outputs']['output_a'].value = (my_var_a * my_var_b);
  document.forms['f_outputs']['output_b'].value = (my_var_a * my_var_b);
  document.forms['f_outputs']['output_c'].value = (my_var_a + my_var_b);
  document.forms['f_outputs']['output_d'].value = (my_var_a - my_var_b);
  document.forms['f_outputs']['output_e'].value = (my_var_a / my_var_b);
}