How do multiply each value in the div with class="crtTotal" and have a div output that displays the answer: for example 1.75 x 3.65 x 2.10 = 13.41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box" class="boxlit">
<div class="box" data-id="75">Weston Bears - Cooks Hill United
<br>Home
<div class="crtTotal">1.75</div>
</div>
<div class="box" data-id="79">Logan Lightning - Brisbane City
<br>Draw
<div class="crtTotal">3.65</div>
</div>
<div class="box" data-id="81">Eastern Suburbs Brisbane - Moreton Bay United Jets
<br>Home
<div class="crtTotal">2.10</div>
</div>
<br>
<div class="total">Total</div>
Here Is the script I Came up with but works on sum (Addition), how do I Get It To Multiply for example 1.75 x 3.65 x 2.10 = 13.41
<script>
$(function() {
var sum = 0;
$('.crtTotal').each(function(){
sum += parseFloat(this.innerHTML, 10)
})
$('.total').text(sum);
})
</script>
The issue is because you initialise sum to zero. Therefore every number you multiply by sum is still zero. To fix this you could create an array of all values then use reduce() to multiply them all together.
To display the output to 2DP you can use toFixed(2) - but be aware this will convert the value to a string. Only call this function when presenting the value in the UI, not when it will be used for further calculation.
let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
let total = values.reduce((a, b) => a * b);
$('.total').text(total.toFixed(2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="box" class="boxlit">
<div class="box" data-id="75">Weston Bears - Cooks Hill United
<br>Home
<div class="crtTotal">1.75</div>
</div>
<div class="box" data-id="79">Logan Lightning - Brisbane City
<br>Draw
<div class="crtTotal">3.65</div>
</div>
<div class="box" data-id="81">Eastern Suburbs Brisbane - Moreton Bay United Jets
<br>Home
<div class="crtTotal">2.10</div>
</div>
<br>
<div class="total">Total</div>
</div>
Related
We are posting data to a URL (https://website/rest/v2/executions) using an orchestration tool, which should return a number from the website. Data used to post is in json format. Occassionally we receive a html response instead of number. Header used in data is application/json. Validated json data, and it is fine. Below is the error, can someone help in identifying the cause?
HTML Response:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Operations Orchestration</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/oo/features/theme/css/oo-theme.css" rel="stylesheet">
<script type="text/javascript">
//this is a workaround to a defect in the glorious ie,
// apparently it throws an exception if we try to write to the console and the console is not open...
if (!window.console) {
window.console = {
log : function (obj) { /*do nothing here since the console is closed*/
}
};
};
</script>
</head>
<body>
<div class="modal login-container container-fluid">
<div class="row-fluid">
<div class="span5">
<img src = "/oo/features/theme/images/mfLogo-flat-200x26.png" style="margin-left:20px;"/>
</div>
<div class="container span8">
<div>
<div id="header" class="header-login" style="margin-left: 20px">Operations Orchestration</div>
<div class="modal-body form-container">
<div id="logout_label">A general error has occurred. Contact your administrator for more details.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to show that city weather information that I selected from the drop-down, how can I do this through json? I am getting that city through Jquery
when selected I just want to know how can I load the city weather information?
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="weather-container" style="background:#ccc;text-align:center">
<img src="" alt="" class="icon">
<p class="city"></p>
<p class="weather" style="font-size: 22px;margin:0"></p>
<p class="temp" style="font-size: 60px;margin:0;font-weight:bold"></p>
<select name="" class="select_city" id="">
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
<option value="Perth">Perth</option>
<option value="Berlin">Berlin</option>
</select>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
script.js
$(document).ready(function(){
$("select.select_city").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("You have selected the country - " + selectedCountry);
});
});
var cityy = "Lahore";
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + selectedCountry + "&units=metric&APPID=d89208ad904d31a4402384ff1d4d1a2f",
function(data){
console.log(data);
var icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
$('.icon').attr("src", icon);
var temp = Math.round(data.main.temp);
$('.temp').append(temp);
var weather = data.weather[0].main;
$('.weather').append(weather);
var city = data.name;
$('.city').append(city);
});
You have to use "var selectedCountry" as a global variable so that it should be available to other functions. An issue with scope and context.
Define it like:
var selectedCountry = null;
then in document.ready allocate the value without using var keyword.
selectedCountry = selected values through Javascript
So I am trying to make a binomial squared using code for a massive program I was attempting to get help with earlier. Since the code for the other program is huge I made a sub program to demonstrate what I am having issues with
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
<p id="First_Input"> <input id="Value_A"></p>
<p id="Second_Input"> <input id="Value_B"></p>
<p id="Output"></p>
<p id="Activate"><button onclick="RUN()">Test This out</button></p>
<script>
function RUN() {
var a = document.getElementById("Value_A").value
var b = document.getElementById("Value_B").value
document.getElementById("Output").innerHTML = "$$(" + a + "-" + b + ")^2$$"
}
</script>
</body>
It runs in a browser just fine, but I cannot get the mathjax lib to work correctly after outputting the new equation
I needed to add in a piece of code that was missing
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
<p id="First_Input"> <input id="Value_A"></p>
<p id="Second_Input"> <input id="Value_B"></p>
<p id="Output"></p>
<p id="Activate"><button onclick="RUN()">Test This out</button></p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML,http://myserver.com/MathJax/config/local/local.js">
function RUN() {
var a = document.getElementById("Value_A").value
var b = document.getElementById("Value_B").value
document.getElementById("Output").innerHTML = "$$ (" + a + "-" + b + ")^2 $$";
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
</script>
</body>
Took a while to find it, but I found it. Hopes this helps someone in the future it is the Mathjax piece of code you need
I am making a WebApp with angularJS and I have something that irritates me.
<!doctype html>
<html>
<head>
<title>webapp</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="container">
<h1>WebApp</h1>
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-include="'blocks/item.html'"></div>
<div ng-include="'blocks/something.html'"></div>
<div ng-include="'blocks/health.html'"></div>
<div ng-include="'blocks/mana.html'"></div>
<div ng-include="'blocks/running.html'"></div>
<div ng-include="'blocks/out.html'"></div>
<div ng-include="'blocks/of.html'"></div>
<div ng-include="'blocks/ideas.html'"></div>
</div>
</div>
</body>
</html>
Every item, i have to write another include. is there a way to include these and any additions in the future with one command?
Firstly, in your controller create the alphabet array (as shown here)
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]
Then, in your template:
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>
[edit]
If you want to work with any generic list and not specifically the alphabet as in the original post, just use an array and initialize it with whatever.
$scope.charArray = ['lemon', 'tree', 'apple'];
The point here is using ng-repeat to iterate over any number of objects you like, and dynamically create the ng-include elements appropriately.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
In our application we have 4 pages. Each page has 5 check boxs. If I
<--
app flow like this page0 -->page1 -->page4
-->page2 -->page4
-->page3 -->paeg4
go to page 1 and select 2 items,
then go to page 2, and select 4 items,
and after that go to page 3 and select 2 items,
the total count of items selected is 11.
Now, if I now go to page 4, can I somehow store the values from all pages to save.json file which is located under www folder. I am using PhoneGap.
If you are asking if a PhoneGap app can write a JSON file, then the answer is yes. Use the FileSystem plugin to do so. However, if you are just saving a small amount of data, it would be far easier to use LocalStorage.
First you need to create an array , store this array in localStarage, like got to page 1 store two value in array and update your localStorage value on every page on selection, on last page write this localStorage value in file using org.apache.cordova.file plugin. I have done example, you can manage as your rquirement.
a.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_a">
<div data-role="header" class="">
<h3>Fruit</h3>
</div>
<div role="main" id="" class="ui-content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="apple" id="apple" value="Apple" >
<label for="apple">Apple</label>
<input type="checkbox" name="orange" id="orange" value="Orange">
<label for="orange">Orange</label>
</fieldset>
</div>
Book Order
</div>
</div>
</body>
<script>
var arr_fruit = [];
$("#btn_a").on("click", function(event){
$("input[type=checkbox]:checked").each(function(key){
arr_fruit.push( $(this).val());
});
localStorage.setItem("arr_fruit", arr_fruit);
location.href = "c.html";
})
</script>
<html>
b.html
<div data-role="page" id="page_b">
<div data-role="header" class="">
<h3>Flowers</h3>
</div>
<div role="main" id="" class="ui-content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="rose" id="rose" value="Rose" >
<label for="rose">Rose</label>
<input type="checkbox" name="sunflower" id="sunflower" value="Sunflower">
<label for="sunflower">Sunflower</label>
</fieldset>
</div>
Book Order
</div>
</div>
<script>
var arr_flow = [];
$("#btn_b").on("click", function(event){
$("input[type=checkbox]:checked").each(function(key){
arr_flow.push( $(this).val());
});
localStorage.setItem("arr_flow", arr_flow);
location.href = "c.html";
})
</script>
c.html
<div data-role="page" id="page_c">
<div data-role="header" class="">
Page A
<h3>Details</h3>
Page B
</div>
<div role="main" id="" class="ui-content">
<p id="fr_title" style="display:none"><h3>Fruits</h3> </p>
<ul data-role="listview" id="list_fruit"></ul>
<p id="fl_title" style="display:none"><h3>Flowers</h3> </p>
<ul data-role="listview" id="list_flow"></ul>
</div>
</div>
<script>
var list_fruit = "";
var arr_fruit = localStorage.getItem("arr_fruit").split(",");
var list_flow = "";
var arr_flow = localStorage.getItem("arr_flow").split(",");
$("#page_c").on("pageshow", function(event){
// Fruits
$("#fr_title").show();
$.each(arr_fruit, function(key, value){
list_fruit += '<li>'+value+'</li>';
});
$("#list_fruit").html(list_fruit).trigger("create");
$("#list_fruit").listview( "refresh" );
// Flowers
$("#fl_title").show();
$.each(arr_flow, function(key, value){
list_flow += '<li>'+value+'</li>';
});
$("#list_flow").html(list_flow).trigger("create");
$("#list_flow").listview( "refresh" );
});
</script>