Need help sum of numbers in the row javascript [duplicate] - javascript

This question already has answers here:
How to add two strings as if they were numbers? [duplicate]
(20 answers)
Closed 7 years ago.
<html>
<script>
function myFunction() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var erg = document.getElementById("erg").value;
var sum = a + b + c + d;
document.getElementById("erg").innerHTML = sum;
</script>
<body>
<table border="1">
<tr>
<td id="a">2</td>
<td id="b">4</td>
<td id="c">5</td>
<td id="d">3</td>
<td id="erg"></td>
<td>
<button type="button" onclick="myFunction()">Sum</button>
</td>
</tr>
</table>
</body>
</html>

parse int the number,
and td not has value, use innertext
<html>
<script>
function myFunction() {
var a =parseInt(document.getElementById("a").innerText);
var b = parseInt(document.getElementById("b").innerText);
var c = parseInt(document.getElementById("c").innerText);
var d = parseInt(document.getElementById("d").innerText);
var sum = a + b + c + d;
document.getElementById("erg").innerHTML = sum;
}
</script>
<body>
<table border="1">
<tr>
<td id="a">2</td>
<td id="b">4</td>
<td id="c">5</td>
<td id="d">3</td>
<td id="erg"></td>
<td>
<button type="button" onclick="myFunction()">Sum</button>
</td>
</tr>
</table>
</body>
</html>

Related

Change <p> to <table>

I wants to change the output of the <p id="demo> to <table> with <tr> and <td>but it involved Javascript in the output so it doesn't on what I've tried.
<button onclick="myFunction()">Predict</button>
<div id="demo" align="center"></div>
<script type="text/javascript">
var selectedprg = '';
var selectedcount = '';
var selectedcity = '';
var average = '';
function myFunction() {
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>'
}
$(document).ready(function(){
$("#prg").change( function(){
selectedprg = $('#prg option:selected').text();
selectedcount = $('#prg option:selected').data('prgcount');
selectedcity = $('#prg option:selected').data('citycount');
if(selectedcount > 5){
average = selectedcount / 3 + 5;
} else{
average = selectedcount / 3 - 5;
}
});
});
</script>
Current output
Expected output
Could someone assist on this? Thank you.
You can do something like this:
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>
`
the styling should be writing with css ofcourse.

Calculating items that were entered into an array

I'm trying to find a way to calculate the data that was entered into an array.
The JavaScript
function getInput()
{
var even = [];
var odd = [];
var num = prompt("Enter your number");
if (num % 2 === 0) {
alert("Data entered into array.");
even.push(num);
}
else if (num % 2 == 1) {
alert("Data entered into array.");
odd.push(num)
}
else {
alert("Invalid input.");
}
}
function finished() //This is where the calculations are done. It's accessed by a button in my HTML.
{
var sum = document.getElementById("leftSumOutput").innerHTML = even[];
}
This is the structure for the page. I'm trying to use tables to store the outputs.
The HTML
<!DOCTYPE html>
<html>
<head>
<title>Sample Title</title>
<script type="text/javascript" src="assignmentOne.js"></script>
<link rel="stylesheet" type="text/css" href="assignmentOne.css">
<link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body>
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input" onclick="getInput()"><b>Click to input data</b></button><br><br>
<button id="done" onclick="finished()">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="leftSumOutput"></td>
<td id="rightSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="leftAvgOutput"></td>
<td id="rightAvgOutput"></td>
</tr>
</table>
</div>
</body>
</html>
I want to calculate the items within the array. I'm a novice, so I apologize in advance.
EDIT: I forgot to mention that I don't know how to calculate the averages of the fields either. Any help with that would be appreciated. Thanks everyone for your assistance so far!
I think you are little bit confused with scoping of variables.
Here is an example of how it could've been done:
(function(w, d) {
var odds = [], evens = [], button, elSumOdds,elSumEvens, elAvgOdds, elAvgEvens, s
w.addEventListener('load', function() {
button = d.querySelector('button')
elSumOdds = d.querySelector('#sum-odds')
elSumEvens = d.querySelector('#sum-evens')
elAvgOdds = d.querySelector('#avg-odds')
elAvgEvens = d.querySelector('#avg-evens')
button.addEventListener('click', calculate)
})
function calculate() {
var i = prompt('enter number') | 0;
if ((i|0)%2) {
odds.push(i)
s = odds.reduce(function(a,n) { return a+n }, 0)
elSumOdds.innerText = s
elAvgOdds.innerText = s / odds.length
} else {
evens.push(i)
s = evens.reduce(function(a,n) { return a+n }, 0)
elSumEvens.innerText = s
elAvgEvens.innerText = s / evens.length
}
}
})(window, document)
<button > calculate</button>
<table>
<tr><td></td><td>Sum</td><td>Avg</td></tr>
<tr><td>Odds</td><td id='sum-odds'></td><td id='avg-odds'></td></tr>
<tr><td>Evens</td><td id='sum-evens'></td><td id='avg-evens'></td></tr>
</table>
If you need to calculate sum of each element in array you need to write map function. Visit link: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map
if you just need to know amount of elements, call: alert(even.length);
Note: #vittore 's structure inspired this change.
(function(d) {
d.getElementById('input').addEventListener('click', getInput);
d.getElementById('done').addEventListener('click', finished);
var elSumOdd = d.getElementById('oddSumOutput');
var elSumEven = d.getElementById('evenSumOutput');
var elAvgOdd = d.getElementById('oddAvgOutput');
var elAvgEven = d.getElementById('evenAvgOutput');
var even = [];
var odd = [];
function getInput() {
var num = prompt("Enter your number") | 0;
if (num % 2 == 0) {
even.push(num);
} else if (num % 2 == 1) {
odd.push(num);
} else {
alert("Invalid input.");
}
finished();
}
function finished() { //This is where the calculations are done. It's accessed by a button in my HTML.
elSumOdd.innerHTML = odd.reduce(function(a, b) {
return a + b;
}, 0);
elSumEven.innerHTML = even.reduce(function(a, b) {
return a + b;
}, 0);
elAvgOdd.innerHTML = elSumOdd.innerHTML / odd.length || 0;
elAvgEven.innerHTML = elSumEven.innerHTML / even.length || 0;
}
})(document);
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input"><b>Click to input data</b>
</button>
<br>
<br>
<button id="done">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="evenSumOutput"></td>
<td id="oddSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="evenAvgOutput"></td>
<td id="oddAvgOutput"></td>
</tr>
</table>
</div>

angular.js how to parse variable data inside view

I have this variable:
var number = "1,10,25,60";
How can I parse it inside a view into this form?
<tr>
<td ng-click="ctrl.set(1)>1</td>
<td ng-click="ctrl.set(10)>10</td>
<td ng-click="ctrl.set(25)>25</td>
<td ng-click="ctrl.set(60)>60</td>
</tr>
In normal js I would just do var numbers = number.split(","); and then some loop like so:
var html;
for (i = 0; i <= numbers.length; i++) {
html += "<td ng-click='ctrl.set" + numbers[i] + "'>" + numbers[i] + "</td>";
}
Maybe some directive?
Assign it to a $scope var (the split result)
var number = "1,10,25,60";
$scope.numbers = number.split(",");
And the view:
<tr ng-repeat="num in numbers">
<td ng-click="ctrl.set(num)>{{num}}</td>
</tr>
ng-repeat will iterate through an array:
<html>
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js"></script>
</head>
<body ng-app >
<input ng-model="$scope.numbers" ng-init="$scope.numbers = [1,10,25,60]"/>
<table>
<tbody>
<tr>
<td ng-repeat="n in $scope.numbers track by $index"
ng-click="console.log(n);$scope.selected = n">{{n}}
</td>
</tr>
</tbody>
</table>
<div>{{$scope.selected}}</div>
</body>
</html>

Javascript - float value from an HTML input in table cell

It's part of the larger task. Why is the problem Nan and how to solve it? The table is added together elements from several pools <input> which elemenatymi table. All code is summed up in the table of size k / d.
Why is the problem Nan and how to solve it?
function licz(tableID){
var table = document.getElementById(tableID);
var k, d, s=0, temp;
var i = table.rows.length;
for(k=1; k<=i; k++){
for(d=0; d<2; d++){
temp = parseFloat(document.getElementById(tableID).rows[k].cells[d].innerHTML);
alert(temp);
s=s+temp;
}
document.getElementById(tableID).rows[k].cells[d].innerHTML = s;
}
}
<form name="roz" action="">
<table id="tyg" class="product_values" style="width: 20%" border=1>
<tr>
<td> Pon </td>
<td> Wt </td>
<td> Sum </td>
</tr><tr>
<td> <input type="number" name="inp_a" ></td>
<td> 4 </td>
<td></td>
</table>
</form>
<button onclick="licz('tyg')">go</button>
This is not right way for getting value from child elements you should do something like this :
JavaScript:
function licz(tableID){
var table = document.getElementById(tableID);
var k, d, temp;
var i = table.rows.length;
for (k = 1; k <= i; k++) {
for (d = 0; d < 2; d++) {
if (d == 0) {
temp = parseFloat(document.getElementById(tableID).rows[k].cells[d].childNodes[1].value);
}
if (d == 1) {
temp = temp + parseFloat(document.getElementById(tableID).rows[k].cells[d].innerHTML);
}
}
document.getElementById(tableID).rows[k].cells[d].innerHTML = temp;
document.getElementById('num').v
}
}
HTML:
<table id="tyg" class="product_values" style="width: 20%" border=1>
<tr>
<td> Pon </td>
<td> Wt </td>
<td> Sum </td>
</tr>
<tr>
<td> <input id = 'num' type="number" name="inp_a" ></td>
<td> 4 </td>
<td></td>
</tr>
</table>
well... it's a good question. You should read DOM for knowing more about this.

javaScript multiply two numbers and show the result into third html input

I am trying to take a number from my html form and then multiply it with a number from my JavaScript function and displaying the result in another html input. Want I want is when the user click on the result input area then only the multiplication result shows.
<script type="text/javascript">
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = y * z;
document.getElementById("bill").innerHTML = x;
}
<table>
<tr>
<td>Total Kms Run</td>
<td><input type="text" id="km" name="km" required>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" id = "bill" name="bill" required onclick="myFunction()">
</tr>
</table
You're adding the numbers, not multiplying them :).
That aside, inputs don't have innerHTML, you need to set the value:
document.getElementById("bill").value = x;
Do Change like this
<script type="text/javascript">
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = y * z;
document.getElementById("bill").value = x;
}</script>
You have made many syntax mistakes in html
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = Number(y) * Number(z);
document.getElementById("bill").value = x;
}
<table>
<tr>
<td>Total Kms Run</td>
<td><input type="text" id="km" name="km" required ></td>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" id="bill" name="bill" required onclick="myFunction()"></td>
</tr>
</table>

Categories