# Lesson 19 jQuery Arithmetic

JQuery can perform arithmetic easily using arithmetic operators.

#### Example 19.1

```<!DOCTYPE html>
<html>

<script>
\$("#btn1").click(function(){
var x=10;
var y=20;
var sum=x+y;
var diff=x-y;
var product=x*y;
var quotient=x/y;
\$("#firstnum").text(x);
\$("#secondnum").text(y);
\$("#sum").text(sum);
\$("#diff").text(diff);
\$("#prod").text(product);
\$("#quo").text(quotient);

});
});
</script>
<body>
<ul>
<li id="list1"  class="txtclr1" title=" title1"><span>This is item1. My id is= </span>
<li id="list2" class="txtclr2" title=" title2"><span>This is item2. My id is= </span>
<li id="list3" class="txtclr3" title=" title3"><span>This is item3. My id is= </span>
</ul>
<button id="btn1">Click to show the IDs and the Title of each item</button>
</body>
</html>
```

x=

y=

x+y=

x-y=

x*y=

x/y=

#### Example 19.2

This example shows how to create a math drill using random number.

We use parseInt(Math.random()*n) to generate random integers between 0 and n. We also use the if else conditional operators to check the answer input by the user.

```<!DOCTYPE html>
<html>
<script>
\$("#btn2").click(function(){
var x=parseInt(Math.random()*50);
var y=parseInt(Math.random()*50);
\$("#num1").text(x);
\$("#num2").text(y);

});

\$("#btn3").click(function(){
var a=\$("#num1").text();
var b=\$("#num2").text();
var sum=parseInt(a)+parseInt(b);
var message;

if(\$("#ans_sum").val()==sum)
{message="Correct"+", good job";}

else

});
});
</script>
<body>
<h1>Math Drill</h1>
<p>x=<span id="num1"></span></p>
<p>y=<span id="num2"></span></p>
x+y=<input type="text" id="ans_sum"><br>
<button id="btn2">Generate Numbers</button>

</body>
</html>
```

x=

y=