Trouble with IDs and for loops in Javascript - javascript

$(document).ready(function() {
var week = 5;
var players = 8;
var numbers = [];
var array = [];
for (o = 0; o < players; o++) {
for (i = 0; i < week + 1; i++) {
var improved = i + 1;
var oString = o.toString();
var iString = i.toString();
var id = "#" + oString + iString;
var rawText = $(id).text();
var refined = Number(rawText);
array.push(refined);
}
numbers.push(array);
array = [];
}
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
$("#total1").text(total1);
for (p = 0; i < numbers.length; p++) {
var total2 = 0;
$.each(numbers[0], function() {
total2 += this;
});
}
$("#total2").text(total2);
for (p = 0; i < numbers.length; p++) {
var total3 = 0;
$.each(numbers[0], function() {
total3 += this;
});
}
$("#total3").text(total3);
for (p = 0; i < numbers.length; p++) {
var total4 = 0;
$.each(numbers[0], function() {
total4 += this;
});
}
$("#total4").text(total4);
for (p = 0; i < numbers.length; p++) {
var total5 = 0;
$.each(numbers[0], function() {
total5 += this;
});
}
$("#total5").text(total5);
var total = total1 + total2 + total3 + total4 + total5;
$("#total").text(total);
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style2.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body>
<table>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</table>
<p>Total: <span id="totalAll"></span>
</p>
</body>
</html>
Recently, I was charged with creating a fantasy football website for my group of friends, having minimal Javascript and HTML experience. I don't mind manually inputing data from the NFL website, but I thought it would be cool to have a script to automatically add up the numbers in the table. But, the code I wrote doesn't work. Nobody I know has any knowledge in Computer Science, and Ive turned to Google throughout the whole process. The browser console returns no errors. What I expect to happen is the total points from all of my tds for each week go into the week total at the bottom, and then the week totals be added up into the final total. What really happens is nothing. Half the time, when I change something, the page crashes.
I cant seem to get a JSfiddle to run without crashing on run-time, so im putting it into pastebin
http://pastebin.com/Wb3ENMZY
All the for loops at the end are temporary, to be taken down when the first part works.


Not too sure why your code wouldn't work in JSFiddle
Here's a fiddle with a work example of what you were trying to accomplish Demo
HTML
<table>
<thead>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<thead>
<tbody>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</tbody>
</table>
<p>Total: <span id="totalAll"></span>
</p>
Note the addition of the <thead> and the <tbody> this is so we can easily select the body rows in JQuery
Code
//Make a list of values for each column
var sums = [0,0,0,0,0];
//Go through each row in the body of the table
$("tbody tr").each(function () {
//We start at 2 because thats the firs of the weeks columns
for(var i = 2; i <= 6; i++)
{
//Add the current column's value to the sum. Note we use :eq() selector to get the i'th column
sums[i-2] += parseInt($("td:eq("+i+")", this).html());
}
});
var total = 0;
//Go through each column sum totalling it and writing it to the appropriate column
for(var i = 0; i < sums.length; i++)
{
total += sums[i];
$("#total" + (i + 1)).html(sums[i]);
}
//Write the total
$("#totalAll").html(total);
From your original code
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
This was causing Javascript to loop forever. Your for loop will loop until i < numbers.length but i isn't defined here. You probably mean p there. After replacing the i with p it no longer looped forever but each column would have the same value, numbers[0] should be changed for each column you're parsing.
I'm still having issues with your original code even after fixing those errors though.

Related

Toggle elements from classes with JS

I would like to show more information when someone click on show more buttons. The complication is that there are several buttons and informations to toggle with same className.
What am I doing wrong??
var element = document.querySelectorAll("btn");
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
};
}
td{border:solid 1px black;}
.btn, #btn_id{color:blue; text-decoration:underline; cursor:pointer;}
.extrainfo{
display:none
}
<table>
<tbody>
<tr class="info_group">
<td>Title 1</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 1</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 2</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 2</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 3</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 3</td>
</tr>
</tbody>
</table>

to work you javaScript
var element = document.querySelectorAll("btn"); // need to be (".btn")
// you want it to be i < element.length; ? or there's a variable called button_length?
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
}; // missing a Parenthesis need to be this }); not this };
}
I'm still not sure about the functionality, but see the code below if that's what you're looking for.
var element = document.querySelectorAll(".btn");
var extraInfo = document.querySelectorAll(".extrainfo");
for (let i = 0; i < element.length; i++) {
element[i].addEventListener("click" , function() {
extraInfo[i].classList.toggle("extrainfo");
});
}
hereJSFiddle you can play around with the code

html table with javascript sp

Basically, I am a beginner who recently started working with Javascript and I want to simplify my code. How can I simplify this? How would I apply a loop because it is too long to declare it by a single code if I want to change the id. Not manually changing in the html, but using a Javascript to change the value in html?
<table border="2" cellpadding="4">
<tbody>
<tr>
<td id="cell1"> one </td>
<td id="cell2"> two </td>
<td id="cell3"> three </td>
</tr>
<tr>
<td id="cell4"> four </td>
<td id="cell5"> five </td>
<td id="cell6"> six </td>
</tr>
</tbody>
</table>
document.getElementById("cell1").innerHTML="1";
document.getElementById("cell2").innerHTML="2";
document.getElementById("cell3").innerHTML="3";
document.getElementById("cell4").innerHTML="4";
document.getElementById("cell5").innerHTML="5";
document.getElementById("cell6").innerHTML="6";

try this code using for loop
var items = document.getElementsByTagName('td');
for (var i = 0, j = 1; i <= items.length - 1; i++, j++) {
items[i].innerHTML = j;
}
<table border="2" cellpadding="4">
<tbody>
<tr>
<td id="cell1"> one </td>
<td id="cell2"> two </td>
<td id="cell3"> three </td>
</tr>
<tr>
<td id="cell4"> four </td>
<td id="cell5"> five </td>
<td id="cell6"> six </td>
</tr>
</tbody>
</table>

i hope that help you and you can start learn javascript on this site https://www.w3schools.com/js/ is very useful:
var d = document;
var trs = d.getElementsByTagName("tr");
console.log(trs);
var count = 1;
for(var i=0 ; i<trs.length ; i++){
tds = trs[i].getElementsByTagName("td");
for(var j=0 ; j<tds.length ; j++){
tds[j].innerHTML = count;
count++;
}
console.log(trs[i]);
}

Grouping first and last value in array (Consecutive values are group with first and last element)

I have one object array with time intervals , Number 0 indicates sunday . In my time scheduling page selecting different time ranges in a particular day . I want to group the time values . My initial array is given below
time schedule selection looks like
Each cell has data-day and data-time attribute and selected cell with data-selected attribute
i am iterate through the selected time and got the result like
var selectedIntervals = {};
$('td[data-selected]').each(function() {
var a = $(this).attr('data-day');
var b = $(this).attr('data-time');
if(!selectedIntervals[a]) {
selectedIntervals[a]=[];
}
selectedIntervals[a].push(b);
});
I want the output like
{
0: [["00:00", "05:00"],["08:00", "11:00"]]
}
Please help .

Try this:
arr = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "08:00", "09:00", "10:00", "11:00"];
output = [];
start = arr[0];
for(i=1; i<arr.length; i++) {
if(i == arr.length-1) {
output.push([start, arr[i]]);
break;
}
if(parseInt(arr[i]) - parseInt(arr[i-1]) > 1) {
output.push([start, arr[i-1]]);
start = arr[i];
}
}

Here is a function to make intervals from an array of hour strings.
function makeInterval(arr) {
//e.g. arr = ["00:00", "01:00", "02:00", "03:00", "06:00", "10:00", "11:00"]
//returns [["00:00", "03:00"], ["06:00", "06:00"], ["10:00", "11:00"]]
var interval, result = [];
for (var i = 0; i < arr.length; i++) {
var hour = parseInt(arr[i]);
if (!interval || (hour != parseInt(interval[1]) + 1)) { //if first time or the hour jumps
interval = [arr[i], arr[i]]; //create new interval
result.push(interval);
}
else {
interval[1] = arr[i]; //update the end of interval
}
}
return result;
}
you can call it like
makeInterval(selectedIntervals[0]);
do a loop over the day number if necessary.

mid = a.length
mid=parseInt(a.length / 2)
b=[[a[0],a[mid]],[a[mid+1],a[a.length-1]]]
console.info(b)

Combining your initial code with elfan's code You get this:
$(function() {
var list = {};
var day = 0;
list[day] = selectedSchedules(day);
day = 1;
list[day] = selectedSchedules(day);
console.log(list);
function selectedSchedules(day) {
var schedules = [];
var interval, hour;
$('td[data-selected][data-day=' + day + ']').each(function() {
var b = $(this).data('time');
var current = parseInt(b);
if (!interval || (current != parseInt(interval[1]) + 1)) {
interval = [b, b];
schedules.push(interval);
} else {
interval[1] = b;
}
});
return schedules;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-day="0" data-time="00:00" data-selected="true">00:00</td>
<td data-day="1" data-time="00:00" data-selected="true">00:00</td>
</tr>
<tr>
<td data-day="0" data-time="01:00" data-selected="true">01:00</td>
<td data-day="1" data-time="01:00" data-selected="true">01:00</td>
</tr>
<tr>
<td data-day="0" data-time="02:00" data-selected="true">02:00</td>
<td data-day="1" data-time="02:00" data-selected="true">02:00</td>
</tr>
<tr>
<td data-day="0" data-time="03:00" data-selected="true">03:00</td>
<td data-day="1" data-time="03:00" data-selected="true">03:00</td>
</tr>
<tr>
<td data-day="0" data-time="04:00" data-selected="true">04:00</td>
<td data-day="1" data-time="04:00" data-selected="true">04:00</td>
</tr>
<tr>
<td data-day="0" data-time="05:00" data-selected="true">05:00</td>
<td data-day="1" data-time="05:00" data-selected="true">05:00</td>
</tr>
<tr>
<td data-day="0" data-time="06:00">06:00</td>
<td data-day="1" data-time="06:00">06:00</td>
</tr>
<tr>
<td data-day="0" data-time="07:00">07:00</td>
<td data-day="1" data-time="07:00">07:00</td>
</tr>
<tr>
<td data-day="0" data-time="08:00" data-selected="true">08:00</td>
<td data-day="1" data-time="08:00">08:00</td>
</tr>
<tr>
<td data-day="0" data-time="09:00" data-selected="true">09:00</td>
<td data-day="1" data-time="09:00" data-selected="true">09:00</td>
</tr>
<tr>
<td data-day="0" data-time="10:00" data-selected="true">10:00</td>
<td data-day="1" data-time="10:00" data-selected="true">10:00</td>
</tr>
<tr>
<td data-day="0" data-time="11:00" data-selected="true">11:00</td>
<td data-day="1" data-time="11:00" data-selected="true">11:00</td>
</tr>
<tr>
<td data-day="0" data-time="12:00">12:00</td>
<td data-day="1" data-time="12:00" data-selected="true">12:00</td>
</tr>
<tr>
<td data-day="0" data-time="13:00">13:00</td>
<td data-day="1" data-time="13:00">13:00</td>
</tr>
<tr>
<td data-day="0" data-time="14:00">14:00</td>
<td data-day="1" data-time="14:00">14:00</td>
</tr>
<tr>
<td data-day="0" data-time="15:00">15:00</td>
<td data-day="1" data-time="15:00">15:00</td>
</tr>
<tr>
<td data-day="0" data-time="16:00">16:00</td>
<td data-day="1" data-time="16:00">16:00</td>
</tr>
<tr>
<td data-day="0" data-time="17:00">17:00</td>
<td data-day="1" data-time="17:00">17:00</td>
</tr>
<tr>
<td data-day="0" data-time="18:00">18:00</td>
<td data-day="1" data-time="18:00">18:00</td>
</tr>
<tr>
<td data-day="0" data-time="19:00">19:00</td>
<td data-day="1" data-time="19:00">19:00</td>
</tr>
<tr>
<td data-day="0" data-time="20:00">20:00</td>
<td data-day="1" data-time="20:00" data-selected="true">20:00</td>
</tr>
<tr>
<td data-day="0" data-time="21:00">21:00</td>
<td data-day="1" data-time="21:00" data-selected="true">21:00</td>
</tr>
<tr>
<td data-day="0" data-time="22:00">22:00</td>
<td data-day="1" data-time="22:00" data-selected="true">22:00</td>
</tr>
<tr>
<td data-day="0" data-time="23:00">23:00</td>
<td data-day="1" data-time="23:00" data-selected="true">23:00</td>
</tr>
</tbody>
</table>

Sum table values based on grouping

I have the following table:
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
I need a way to add/sum all values grouped by category, ie: add/sum all values in cat1, then add/sum all values in cat2. For each group I will do something with the total.
So I was hoping for something like:
for each unique category:
sum values in category
do something with this category total
For cat1 the total would be 123 + 486. Cat2 would just be 356. And so on if there were more categories.
I would prefer a purely javascript solution, but JQuery will do if that's not possible.

If I understand you correctly, you do a repeat of each td:first-child (The category cell).
Create a total object. You can check if the category is exist in it for each cell. If so, add current value to the stored value. If not, insert new property to it.
Like this:
var total = {};
[].forEach.call(document.querySelectorAll('td:first-child'), function(td) {
var cat = td.getAttribute('class'),
val = parseInt(td.nextElementSibling.innerHTML);
if (total[cat]) {
total[cat] += val;
}
else {
total[cat] = val;
}
});
console.log(total);
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>

Here's a simple approach using only javascript
//grab data
var allTR = document.getElementsByTagName('TR');
var result = {};
//cycle table rows
for(var i=0;i<allTR.length;i+2){
//read class and value object data
var class = allTR[i].getAttribute('class');
var value = allTR[i+1].innerText;
//check if exists and add, or just add
if(result[class])
result[class] += parseInt(value);
else
result[class] = parseInt(value);
}

You have to use getElementsByTagName("td"); to get all the <td> collection and then you need to loop through them to fetch their innerText property which later can be summed up to get the summation.
Here is the working Fiddle : https://jsfiddle.net/ftordw4L/1/
HTML
<table id="tbl1">
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
<tr>
<td class="total"><b>Total</b></td>
<td class="totalValue"></td>
</tr>
</table>
Javascript
var tds=document.getElementsByTagName("td");
var total=0;
for (var i = 0; i<tds.length; i++) {
if (tds[i].className == "value") {
if(total==0) {
total = parseInt(tds[i].innerText);
} else {
total = total + parseInt(tds[i].innerText);
}
}
}
document.getElementsByClassName('totalValue')[0].innerHTML = total;
Hope this helps!.

here is a solution with jQuery :) if you are interested. it's pretty straightforward
var sumCat1 = 0;
var sumCat2 = 0;
$(".cat1 + .value").each(function(){
sumCat1 += parseInt($(this).text());
})
$(".cat2 + .value").each(function(){
sumCat2 += parseInt($(this).text());
})
console.log(sumCat1)
console.log(sumCat2)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>

A simple approach in JQuery...
var obj = {};
$('tr').each(function() {
$this = $(this)
if ($this.length) {
var cat = $(this).find("td").first().html();
var val = $(this).find("td").last().html();
if (cat) {
if (!obj[cat]) {
obj[cat] = parseInt(val);
} else {
obj[cat] += parseInt(val);
}
}
}
})
console.log(obj)

How to multiply the contents of table cells via js?

I want to multiply cells content (only numbers) and using javascript.
The result is to be displayed in cell X
<script type="text/javascript">
function zmiana(){
var x = document.getElementById("rowstawka");
x.getElementsByTagName('td')[1].innerHTML=document.getElementById('Stawka2').value;
var y = document.getElementById("rowgodziny");
y.getElementsByTagName('td')[1].innerHTML=document.getElementById('Godziny').value;
}
</script>
I'm using the above script to add content to cells in a table.
And here is the table:
<table id="tabela">
<tr id="rowstawka">
<td>Stawka</td>
<td>12</td>
</tr>
<tr id="rowgodziny">
<td>Godziny</td>
<td>50</td>
</tr>
<tr id="rowPensja">
<td>Pensja</td>
<td>-</td>
</tr>
<tr id="rowNetto">
<td>Pensja Netto</td>
<td>x</td>
</tr>
</table>

If you can change the html, try using classes to determine which cells contains a number to be calculated:
<table id="tabela">
<tr id="rowstawka">
<td>Stawka</td>
<td class="num">12</td>
</tr>
<tr id="rowgodziny">
<td>Godziny</td>
<td class="num">50</td>
</tr>
<tr id="rowPensja">
<td>Pensja</td>
<td>-</td>
</tr>
<tr id="rowNetto">
<td>Pensja Netto</td>
<td id="result">x</td>
</tr>
</table>
Then use this simple snippet to make the magic:
var numbers = document.querySelectorAll(".num");
var total = 1;
for (var i = 0; i < numbers.length; i++)
{
total*= Number(numbers[i].innerText);
}
document.getElementById("result").innerText = total;
Fiddle

Categories