Help - Search - Members - Calendar
Full Version: Sum 2 numbers
HTMLHelp Forums > Programming > Client-side Scripting
tangmere.milli
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
Christian J
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?
tangmere.milli
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
Christian J
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?

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.