How to add and subtract in html

Using a few HTML statements and a little JavaScript, you can build your own calculator that performs addition. This task is not as difficult as it seems because HTML creates calculator controls for you, and JavaScript handles all the calculations. All you have to do is lay out the controls on your Web page so that they create the user interface you desire.

Calculator Controls

1. Calculators that add numbers require four basic controls: two text boxes to enter numbers, a text box to display results and a button. The following HTML code creates those four controls:

   + =

   The button contains a call to a JavaScript function that adds the two numbers and stores the result in the third text box. Every text box requires an "id" value that the JavaScript uses to obtain references to the text boxes.

JavaScript Logic

1. The following JavaScript statements create three objects that hold references to the three text boxes:

   var box1 = document.getElementById["box1"]; var box2 = document.getElementById["box2"]; var box3 = document.getElementById["box3"];

   You can then add numbers in the first two text boxes and store them in a variable such as "result," as follows:

   var result = Number[box1.value] + Number[box2.value]; box3.innerHTML = result;

   The "Number" function converts the text values stored in the text boxes into numbers that JavaScript can manipulate.

Usage

1. Upload your HTML calculator page to your Web server so that anyone with access to the Internet can use it. You can also run it locally on your computer. After creating your HTML document, find it in Windows Explorer and double-click its icon to display it in your default Web browser. You can then use the calculator to add and subtract numbers. Browsers also allow you to bookmark local HTML pages that reside on your hard drive. Save your calculator page as a bookmark so that you can open it at any time and perform calculations right from your browser.

Enhancements

1. You don't need to understand Cascading Style Sheets, or CSS, to create a Web page. However, If you do know a little CSS, you can use it create fancier controls. Use color and border attributes, for example, to add colorful borders around your text boxes. You can even put all the controls inside a "div" control and add a background image so that your calculator looks like a real one. If you need to add more numbers, add additional text boxes to the HTML page and modify the JavaScript code so that it includes those text boxes in its calculation.

I am trying to add/subtract from a number inside a span tag. This is depenent on a checkbox. Here is the jquery I'm trying:

//If checked
var $newprice = $["#totalprice"].val[] + 299;               
$["#totalprice"].text[$newprice];

//If NOT checked
var $newprice = $["#totalprice"].val[] - 299;               
$["#totalprice"].text[$newprice];

If I check the box, it adds 299, but unchecked changes the number to -299.

asked May 17, 2016 at 4:55

5

For span you need to use text[] method to get content not val[]. In both case val[] returns an empty string. In first case just string concatenation will be happen. In second case it will be "" - 231 which results -231, where the empty string act as 0.

So you can use text[] with callback which hold index and old value, parse the old value and add or subtract value and return it for update.

//If checked
var $newprice = $["#totalprice"].text[function[i,v]{
    return parseInt[v,10] + 299;               
}];
//If NOT checked
var $newprice = $["#totalprice"].text[function[i,v]{
    return parseInt[v,10] - 299;               
}];

answered May 17, 2016 at 4:58

Pranav C BalanPranav C Balan

111k23 gold badges159 silver badges178 bronze badges

2

You have to do this in change event of your checkbox:

$[':checkbox'].change[function[] {
  if [this.checked] {
    //If checked
    var $newprice = +$["#totalprice"].text[] + 299;
    $["#totalprice"].text[$newprice];
  } else {
    //If NOT checked
    var $newprice = +$["#totalprice"].text[] - 299;
    $["#totalprice"].text[$newprice];
  }
}];

  
  0

  

+$["#totalprice"].text[] leading + would turn the text to number.

answered May 17, 2016 at 5:05

JaiJai

73.4k12 gold badges73 silver badges101 bronze badges

1

How do you add and subtract in HTML?

How do I subtract in HTML?

How do you do addition in HTML?

Can HTML do calculations?