3 Replies - 452 Views - Last Post: 24 July 2014 - 02:52 PM

#1 Pofski  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 06-May 14

What am i doing wrong?

Posted 24 July 2014 - 02:51 AM

I have a code that fills in a table with data, and sorts it depending on the value in the last column.
It has an integrated date counter, so that there is a value that keeps counting up, starting from a certain date.

But i need to have 4 of these, and the moment that i start making multiples, only the last table works, and the previous one doesn't work anymore.

I know it will be something simple, but i can't see it.

<!DOCTYPE html>
<html>
	<head>
		<script type = "text/javascript">
			//window.onload = function Counter(){
			var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

			
			//format for dates is yyyy,mm,dd
			//}
			
			function countUp(yr, mo, da){
			   var today=new Date()
			   var todayy=today.getYear()
			   if (todayy < 1000)
			   todayy+=1900
			   var todaym=today.getMonth()
			   var todayd=today.getDate()
			   var todayh=today.getHours()
			   var todaymin=today.getMinutes()
			   var todaysec=today.getSeconds()
			   var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
			   paststring=montharray[mo-1]+" "+da+", "+yr
			   dd=Date.parse(todaystring)-Date.parse(paststring)
			   dday=Math.floor(dd/(60*60*1000*24)*1)
			   dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
			   dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
			   dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
			   return (dday + " days ");// + dhour + " hours, " + dmin + "mins, " + dsec + " seconds"
			}

			window.onload = function a() {
				//data hardcoded for each row				
				var data = [["2014-05-05", "2014-06-07", 13],
							["2013-01-01", "2014-05-02", 24],
							["2014-07-07", "ongoing", countUp(1999, 1, 1)]];
				
				//sort data by column 2
				data.sort(function a(a,B)/>/> {
					return a[2] - b[2];	
				});
				//reverse to get max on the top
				data.reverse();
				
				var tableBody = document.getElementById("theTable").getElementsByTagName("tbody")[0]; 
				var tableHead = document.getElementById("theTable").getElementsByTagName("thead")[0];
				tableHead.style.fontWeight = "bold"; // without this, the 2 added columns are not bold
				
				//for each record in data, append new row (descending to preserve order)
				for(var j = data.length-1; j >= 0 ; j--) {
					var row = tableBody.insertRow(0);
					var cell0 = row.insertCell(0);
					cell0.innerHTML = j+1;
					var cell1 = row.insertCell(1);
					cell1.innerHTML = data[j][0];
					var cell2 = row.insertCell(2);
					cell2.innerHTML = data[j][1];
					var cell3 = row.insertCell(3)
					cell3.innerHTML = data[j][2];
				}
			}
			window.onload = function b() {
				//data hardcoded for each row				
				var data = [["2014-05-05", "2014-06-07", 13],
							["2013-01-01", "2014-05-02", 23],
							["2014-07-07", "ongoing", countUp(1999, 1, 1)]];
				
				//sort data by column 2
				data.sort(function b(c,d) {
					return c[2] - d[2];	
				});
				//reverse to get max on the top
				data.reverse();
				
				var tableBody = document.getElementById("theTable1").getElementsByTagName("tbody")[0]; 
				var tableHead = document.getElementById("theTable1").getElementsByTagName("thead")[0];
				tableHead.style.fontWeight = "bold"; // without this, the 2 added columns are not bold
				
				//for each record in data, append new row (descending to preserve order)
				for(var i = data.length-1; i >= 0 ; i--) {
					var row = tableBody.insertRow(0);
					var cell0 = row.insertCell(0);
					cell0.innerHTML = i+1;
					var cell1 = row.insertCell(1);
					cell1.innerHTML = data[i][0];
					var cell2 = row.insertCell(2);
					cell2.innerHTML = data[i][1];
					var cell3 = row.insertCell(3)
					cell3.innerHTML = data[i][2];
				}
			}
		</script>
 
	</head>
	<body>
		<table id = "theTable" cellpadding = "3" cellspacing = "3" border = "1">
			<thead>
				<tr>
					<th>Position</th>
					<th>Start</th>
					<th>End</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>
				<!--generated by js-->
			</tbody>
		</table>
		<table id = "theTable1" cellpadding = "3" cellspacing = "3" border = "1">
			<thead>
				<tr>
					<th>Position</th>
					<th>Start</th>
					<th>End</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>
				<!--generated by js-->
			</tbody>
		</table>
	</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: What am i doing wrong?

#2 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5907
  • View blog
  • Posts: 12,813
  • Joined: 16-October 07

Re: What am i doing wrong?

Posted 24 July 2014 - 04:30 AM

First, stop prefixing your anonymous functions with names: it's confusing and I'm surprised it works.

You shouldn't need a reverse for your sort. If the sort can't handle it, you need to rethink it.

Use more functions!

Alright, you primary problem is that window.onload is a reference for one function. And only one function. When you declare another onload function, you are replacing the first. This is legal, but not what you're after.

Again, more functions. Your onload needn't hold everything.

e.g.
<!DOCTYPE html>
<html>
<head>
  <script type = "text/javascript">
      var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

      function countUp(yr, mo, da){
          var today=new Date();
          var todayy=today.getYear()
          if (todayy < 1000) { todayy+=1900; }
          var todaym=today.getMonth()
          var todayd=today.getDate()
          var todayh=today.getHours()
          var todaymin=today.getMinutes()
          var todaysec=today.getSeconds()
          var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
          paststring=montharray[mo-1]+" "+da+", "+yr
          dd=Date.parse(todaystring)-Date.parse(paststring)
          dday=Math.floor(dd/(60*60*1000*24)*1)
          dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
          dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
          dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
          return (dday + " days ");// + dhour + " hours, " + dmin + "mins, " + dsec + " seconds"
      }


      function loadTable(data, ele) {
          var tableBody = ele.getElementsByTagName("tbody")[0]; 
          var tableHead = ele.getElementsByTagName("thead")[0];
          for(var j = data.length-1; j >= 0 ; j--) {
              var row = tableBody.insertRow(0);
              var colNum = 0;
              var add = function(x) { var cell = row.insertCell(colNum++); cell.innerHTML = x; };
              add(j+1);
              add(data[j][0]);
              add(data[j][1]);
              add(data[j][2]);
          }
      }

      function loadTableWithIdAndSort(data, id, cmp) {
          data.sort(cmp);
          loadTable(data, document.getElementById(id));
      }


      function loadTableA(data) {
          loadTableWithIdAndSort(data, "theTable", function(x, y) { return x[2] - y[2]; });
      }

      function loadTableB(data) {
          loadTableWithIdAndSort(data, "theTable1", function(y, x) { return x[2] - y[2]; });
      }

      window.onload = function() {
          var data = [["2014-05-05", "2014-06-07", 13],
              ["2013-01-01", "2014-05-02", 24],
              ["2014-07-07", "ongoing", countUp(1999, 1, 1)]];
          loadTableA(data);
          loadTableB(data);
      }
  </script>

</head>
<body>
  <table id = "theTable" cellpadding = "3" cellspacing = "3" border = "1">
    <thead>
      <tr>
        <th>Position</th>
        <th>Start</th>
        <th>End</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
    <!--generated by js-->
    </tbody>
  </table>
  <table id = "theTable1" cellpadding = "3" cellspacing = "3" border = "1">
    <thead>
      <tr>
        <th>Position</th>
        <th>Start</th>
        <th>End</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
    <!--generated by js-->
    </tbody>
  </table>
</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#3 Pofski  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 06-May 14

Re: What am i doing wrong?

Posted 24 July 2014 - 06:25 AM

Thank you baavgai.

I am in the process of learning javascript from books and online(3 months now, while working :/ ), and i do not have that much experience with coding.
I really appreciate when somebody like you points out where i am going completely wrong.
I will try to get better :D
Was This Post Helpful? 0
  • +
  • -

#4 felgall  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 148
  • Joined: 22-February 14

Re: What am i doing wrong?

Posted 24 July 2014 - 02:52 PM

Get rid of the onload event handler.

Make sure the Javascript is attached to the bottom of the page so that the code you wanted to attach to the onload can be run straight away.

Use event listeners instead of antiquated handlers when you do need event handling - that allows you to attach multiples without them overwriting one another.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1