Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Sum 2 numbers

Posted by: tangmere.milli Oct 4 2016, 08:09 AM

Hi all,

I am very new to HTML website design, so apologies for the number of mistakes in this code.

I am trying to sum 2 numbers within the code. 1 is a fixed number (price) and the other is input by the user.

The code for this is below...

CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NewChocolateBox</title>
<style>
body {
    background-color: #000000;
    text-align:center;

}
#Q
{
width:146px;
}

</style>
</head>
<body text="white">

<p style="font-family:agency fb; font-size: 41px; position:absolute; top:205px;left:539px;"> Individual Chocolates</p>
<p style="font-family:agency fb; font-size: 21px; position:absolute; top:432px;left:539px;"> Caramel Pot
<br> Caramel mousse with
<br> milk chocolate top </p>
<p style="font-family:agency fb; font-size: 21px; position:absolute; top:504px;left:545px;"> Price Per Unit £</p>
<p style="font-family:agency fb; font-size: 21px; position:absolute; top:504px;left:651px; type="number" name="price1" id="price1" >1.99</p>

<a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\ChocBoxHome.htm"><center><img src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ChocolateBoxLogo.jpg"
alt="CBLogo" style="width:850px;height:180px;"></center></a>

<a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Products.htm"><img style=
"position:absolute; top:185px;left:537px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ProductsTab.jpg" alt="CBProducts"></a>

<a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Shop.htm"><img style=
"position:absolute; top:185px;left:749px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ShopTab.jpg"
alt="CBShop"></a>

<a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\AboutUs.htm"><img style=
"position:absolute; top:185px;left:960px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\AboutUs.jpg"
alt="CBAboutUs"></a>

<a href="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\ContactUs.htm"><img style=
"position:absolute; top:185px;left:1171px;width:210px;height:50px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ContactUs.jpg"
alt="CBContactUs"></a>

<img style = "position:absolute; top:330px;left:539px;width:146px;height:115px" src="C:\Users\stuart\Dropbox\UNI Course\Module 08 - Website Design\Notepad Website\Images\ChocShop1.jpg"
alt="Caramel Pot">

<form>
<p style="font-family:agency fb; font-size: 21px; position:absolute; top:500px;left:539px;">
<br>
Qty:<br>
<input type="number" name="Qty1" id="Q"><br>
<button onclick="buttonclick()"> Buy Now </button></p>

<script>
function buttonclick() {
alert ("Payment Successful!");
}
</script>

</form>

</body>
<footer>
<p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:539px;">Copyright © 2016 The Chocolate Box </p>
<p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:1216px;">Designed by Stuart Millington </p>
</footer>
</html>

I was to be able to sum the ID's "Q" and '"price1" and display it directly below the "Buy Now" button.

Any help would be greatly appreciated.

Regards,

TM

Posted by: Christian J Oct 4 2016, 08:17 AM

That can't be done with HTML alone. You need to use scripting, such as javascript or (better) a server-side script like PHP.

How is the actual ordering done?

Posted by: tangmere.milli Oct 4 2016, 08:38 AM

QUOTE(Christian J @ Oct 4 2016, 02:17 PM)

That can't be done with HTML alone. You need to use scripting, such as javascript or (better) a server-side script like PHP.

How is the actual ordering done?

Many thanks for the reply.

The ordering itself is irrelevant. This is just a sample of how screens will look etc.

Would anyone be able to help with the javascript code to achieve this?

Many thanks in advance,

TM

Posted by: Christian J Oct 5 2016, 10:23 AM

QUOTE(tangmere.milli @ Oct 4 2016, 03:38 PM)

The ordering itself is irrelevant. This is just a sample of how screens will look etc.

I was thinking maybe the calculation and ordering could be combined in the same script.

QUOTE

Would anyone be able to help with the javascript code to achieve this?

When do you want the calculation to take place? When the user enters a number in the INPUT field, when clicking the Buy Now button, or some other way?