I need to create a very basic function that calculates the cost when a user clicks the button.
Suppose there are three customers that want to travel; once they click on the button and select the number of people and a location then they should see their total cost for that location.
For example, if they choose the second destination, then three persons will be £450, £500, and then £550 each, so the total should be £1500.
maybe something like this could help: you can see the running the example...
function calc(){
var tmpText = "";
var total = 0;
$( ".price" ).each(function( index ) {
//strip string into num
tmpText = $( this ).text();
tmpText = tmpText.substr(1);;
//add number
total+=Number(tmpText)
console.log( index + ": " + $( this ).text() );
});
$("#result").text("$"+total);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td class='price'>$50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td class='price'>$94</td>
</tr>
</table>
<button onclick="calc()">calculate</button>
<p id="result"></p>please be sure you are adding jquery to your fiddle
take a look at the example below
$(document).ready(function(){
$('#flights td').on('click', function(){
var colIndex = $(this).prevAll().length;
var rowIndex = $(this).parent('tr').prevAll().length + 1;
var cost = 0;
var sign = '';
for (var i = 0; i < rowIndex; i++)
{
var value = $('#flights tbody tr:eq(' + i.toString() + ') td:eq(' + (colIndex-1) + ')').html();
sign = value.substring(0,1);
cost += Number(value.substring(1));
}
$('#cost').text(sign + cost);
});
});
<table id="flights">
<thead>
<tr>
<th>Destination</th>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<th>One</th>
<td>$400</td>
<td>$450</td>
<td>$500</td>
</tr>
<tr>
<th>Two</th>
<td>$450</td>
<td>$500</td>
<td>$550</td>
</tr>
<tr>
<th>Three</th>
<td>$500</td>
<td>$550</td>
<td>$600</td>
</tr>
<tr>
<th>Four</th>
<td>$550</td>
<td>$600</td>
<td>$650</td>
</tr>
<tr>
<th>Five</th>
<td>$600</td>
<td>$650</td>
<td>$700</td>
</tr>
</tbody>
</table>
<label>Cost: </label> <label id="cost"></label>
Explanation:
1- $('#flights td') - This is a jquery selector to get all the td(s) inside a table called "#flights" ---- you can find more about jquery selector Here
2- .on('click', function(){}) - Here I'm attaching a event handler function to a specific event which is the click ---- you can find more about .on() Here
3- var colIndex = $(this).prevAll().length; - Here I'm getting the column index of the CLICKED td ---- you can find more about .prevAll() Here
4- var rowIndex = $(this).parent('tr').prevAll().length + 1; - Here I'm getting the row index of the CLICKED td ---- you can find more about .parent() Here
5- for (var i = 0; i < rowIndex; i++) - Here I started a loop starting from 0 until the ROW INDEX OF THE CLICKED td ---- you can find more about for loop Here
6- var value = $('#flights tbody tr:eq(' + i.toString() + ') td:eq(' + (colIndex-1) + ')').html(); - Here I'm getting the value inside the td based on the STATIC COLUMN INDEX OF THE CLICKED td and the ROW INDEX (which is i) inside the loop. ---- you can find more about .html() Here
7- value.substring(0,1); - I'm just getting the Sign which may vary ($, €) so that I can concatenate it in the cost label. ---- you can find more about .substring() Here
8- cost += Number(value.substring(1)); - Here I'm getting the value of each td and stripping out the sign and converting it to number and adding it to the total cost which will be populated in the cost label.
9- $('#cost').text(sign + cost); - Here just populating the total cost in the cost label and concatenating the Sign to it.
You can learn more about jquery from Here, it's a good start to learn.
Ok, so here is the jQuery-free solution to this: (you can run it below)
function calc() {
var elems = document.getElementsByClassName("someClass");
var sum = 0;
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var num = elem.innerHTML;
num = num.substr(1);
sum += Number(num);
elem.style.background = "red"
}
document.getElementById("cost").innerHTML = "£" + sum;
}html {
background: url(../images/background.jpg) no-repeat center center fixed;
background-size: cover;
/* Applying image to whole html document */
}
body {
margin: 10px auto;
}
p {
font-family: "times new roman";
font-size: 20px;
padding-left: 40px;
padding-right: 30px;
}
a:hover {
color: red;
}
a:link {
text-decoration: none;
/* These are link styles */
}
h1 {
color: blue;
text-align: center;
font-family: courier;
font-size: 20px;
background-color: #C0C0C0;
}
table th,
table td {
padding: 10px;
border: 1px solid black;
}
td {
text-align: center;
cursor: pointer;
}
h2 {
color: blue;
font-family: courier;
font-size: 20px;
text-align: left;
padding-left: 40px;
padding-right: 25px;
}
article {
font-family: "times new roman";
background-color: #FFFFFF;
font-size: 20px;
margin: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
margin-left: 22%;
margin-right: 20%;
/* This is article section */
}
img {
display: block;
margin: 0 auto;
margin-bottom: 5px;
/* This is image section */
}
#footer {
width: 640px;
margin: auto;
clear: both;
color: white;
text-align: center;
/* This is footer section */
}
/* Below is navigation bar section */
#cssmenu li #cssmenu a {
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-family: Helvetica;
line-height: 1;
}
#cssmenu ul {
background: #0033CC url(../images/pattern.png) top left repeat;
list-style: none;
margin-left: 26%;
margin-right: 24%;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu a:link,
#cssmenu a:visited {
padding: 20px 25px;
display: block;
text-decoration: none;
color: #ffffff;
text-shadow: 0 -1px 1px #586835;
border-right: 1px solid #839b4e;
}
#cssmenu a:hover {
color: #6600FF;
text-shadow: 0 1px 1px #bdcd9c;
}
#cssmenu li {
float: left;
}<body>
<a id="TOP" name="GoTop"></a>
<div id="cssmenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="#">Detinations</a>
</li>
</ul>
</div>
<article>
<h1> Three Different Cruise Tours </h1>
<p>We are currently offering three different Cruise tours....</p>
<h2> Paris & French Countryside Cruise tour </h2>
<img src="images/french.jpg" alt="Paris and French" style="width:90%;height:400px">
<p>You'll be dazzled by the city of romance with visits to the legendary Notre Dame Cathedral and the opulent Palace of Versailles....</p>
<h2> Swiss Splendors Cruise tour </h2>
<img src="images/swiss.jpg" alt="swiss splendors" style="width:90%;height:400px">
<p>From the magnificent snow caps of the Bernese and Swiss Alps to the enchanting gardens surrounding Lake Como....</p>
<h2>Europe's Imperial Treasures Cruise tour</h2>
<img src="images/russia.jpg" alt="European" style="width:90%;height:400px">
<p>You'll be immersed in the unique cultures of Budapest, Vienna and Prague ...</p>
<h1> Price Guide </h1>
<p>click on field to calculate the price.
<p>
<table id="flights">
<thead>
<tr>
<th>Destination</th>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<th>One</th>
<td class="someClass">£400</td>
<td>£450</td>
<td>£500</td>
</tr>
<tr>
<th>Two</th>
<td class="someClass">£450</td>
<td>£500</td>
<td>£550</td>
</tr>
<tr>
<th>Three</th>
<td class="someClass">£500</td>
<td>£550</td>
<td>£600</td>
</tr>
<tr>
<th>Four</th>
<td class="someClass">£550</td>
<td>£600</td>
<td>£650</td>
</tr>
<tr>
<th>Five</th>
<td class="someClass">£600</td>
<td>£650</td>
<td>£700</td>
</tr>
</tbody>
</table>
<button onclick="calc()">calculate first col</button>
<label>Cost:</label>
<label id="cost"></label>
</article>
<div id="footer">
<br>
<p>© 2014</p>
</div>
<a href="#TOP">Go To Top</a>
</body>