# Solution 1 :

You have used id=quantity, but named quantity as point

``````<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
``````

You can see id=”points” in the above line, and in the javascript you have used “quantity”

``````var selScnd = parseInt(document.getElementById("quantity").value);
``````

And cannot guess what the if-else is actually written for, every condition is doing the same work. So remove the if-else. Try the code below.

``````    function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);

var tot_price = selFrst * selScnd;

/*display the result*/

document.getElementById("tot_amount").value = tot_price;
}
``````

# Solution 2 :

The id of the second div is wrong, also, you should compute the price only when both input are chosen:

``````function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);

var tot_price;

if(selScnd && selFrst) {
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;

} else if (selFrst == 64) {
tot_price = selFrst * selScnd;

}
document.getElementById("tot_amount").value = tot_price;
}

/*display the result*/

}``````
``````<form id="banner" method="post" action="">

<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>

<tr>

<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>

</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>

<tr>
<td>Order Total:RM</td>
</tr>
<!--end payment-->

</table>
</form>``````

# Solution 3 :

Variable `selScnd` should be selected with the id `point`, not width `quantity` since there is no such id as `quantity`. In other words there is a typo in your Code.

Your code should be like this:

``````function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);

var tot_price;

if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;

} else if (selFrst == 64) {
tot_price = selFrst * selScnd;

}

/*display the result*/

document.getElementById("tot_amount").value = tot_price;
}``````
``````<form id="banner" method="post" action="">

<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>

<tr>

<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>

</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>

<tr>
<td>Order Total:RM</td>
</tr>
<!--end payment-->

</table>
</form>``````

# Solution 4 :

``````function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;

if ([120, 80, 64].includes(selFrst)) {
tot_price = selFrst * selScnd;
}

/*display the result*/

document.getElementById("tot_amount").value = tot_price;
}``````
``````<form id="banner" method="post" action="">

<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>

<tr>

<td>Size</td>
<td>
<select name="size" id="size">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4*15</option>
<option value="80">4*10</option>
<option value="64">4*8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499">
</td>
</tr>

<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly onfocus="calculateAmount()"></td>
</tr>
<!--end payment-->

</table>
</form>``````

Like @swebdev said “Variable `selScnd` should be selected with its id `point` because there is no such id as `quantity`.

You can put the values (120,80,64) in an array so that you can add more values easily without repeating the if-else.

Finally, instead of using `onchange=""` twice, you may use `onfocus=""` in that last read-only input box. 🙂

# Solution 5 :

Still fail

``````    <table border="1"width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>

<td>Size</td>
<td><select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>

</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="quantity" name="quantity" step="1"
min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
</tr><!--end payment-->

</table>
</form>

<script>

function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);

var tot_price = selFrst * selScnd;

/*display the result*/

document.getElementById("tot_amount").value = tot_price;
}
</script> <!--end table-->
``````

# Problem :

This code should allow users to choose the size and quantity of banners and the code will automatically calculate the price they have to pay. I tried so many ways but it failed. Below is the code that I had done

``````function calculateAmount() {

var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("quantity").value);

var tot_price;

if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;

} else if (selFrst == 64) {
tot_price = selFrst * selScnd;

}

/*display the result*/

document.getElementById("tot_amount").value = tot_price;
}``````
``````<form id="banner" method="post" action="">

<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>

<tr>

<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>

</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>

<tr>
<td>Order Total:RM</td>
</tr>
<!--end payment-->

</table>
</form>``````

### Comment posted by SABRINA

I try edit like you suggest but it still didn’t work

### Comment posted by Subhashis Pandey

can you please tell me what the if-else is doing here?

### Comment posted by swebdev

@SubhashisPandey As you can see every option in select input has a value attribute (value=”120″, value=”80″, and value=”64″), he used if-else to compare those values. and then those value are multiplied with second input/variable not 4×10 etc because we selected values of input

### Comment posted by jabaa

“he used if-else to compare those values” I don’t think “SABRINA” is a “he”

### Comment posted by swebdev

??is that a big deal?