Develop Reference

Showing days left from a date entry?

So if I have <ons-input style="padding-bottom: 15px;" type="date" id="expiration" required="required"></ons-input>, would it be possible to take the date entered and display the days left until that date is reached and count down each day? exp: if todays 2020-12-4 and I input a new date 2020-12-6, then you have 2 days left, then tomorrow it would display 1 day left.
HTML:
<template id="mylist.html">
<ons-page id='mylist'>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
My List
</div>
</ons-toolbar>
<div style="padding-top: 15px; text-align: center;">
<ons-input type="text" class="select-input--underbar" id="food" placeholder="Enter item here . . ."></ons-input>
<br></br>
<label for="expiration">Expiration Date:</label>
<ons-input style="padding-bottom: 15px;" type="text" id="expiration" placeholder = "YYYY-MM-DD" value = ""></ons-input>
<ons-button class="btnAdd" id="start-count" modifier="large" onclick="addItem()">Add Item</ons-button>
</div>
<ons-list id='foodList'>
<ons-list-header>Listed Items:</ons-list-header>
<div class="countdown-content">
<ons-list-item>
<span id="day"></span> Days
<span id="hour"></span> Hours
<span id="minute"></span> Minutes
<span id="second"></span> Seconds
</ons-list-item>
</div>
</ons-list>
</ons-page>
</template>
JavaScript:
function listItems(tx, rs)
{
var output = '';
var foodList = document.getElementById('foodList');
for(i = 0; i < rs.rows.length; i++)
{
var row = rs.rows.item(i);
output += "<ons-list-item>" + "Item: " + row.food + " " + "<br></br>" + "Expiration: " + row.expiration + "<br></br>" + "Days: " + day + "<br></br>" + "Hours: " + hour + "<br></br>" + "Minutes: " + minute + "<br></br>" + "Seconds: " + second +
"<div class=\"right\"> <ons-button onclick='deleteItems(" + row.ID + ");') ><ons-icon icon=\"trash\"></ons-icon></ons-button></div>" +
"</ons-list-item>";
}
foodList.innerHTML = output;
}
function addItem()
{
var foodText = document.getElementById("food");
var expText = document.getElementById("expiration");
var foodVal = foodText.value;
var expVal = expText.value;
db.transaction(function(tx)
{
tx.executeSql("INSERT INTO foodLogs (food, expiration) VALUES (?, ?)", [foodVal, expVal])
});
foodText.value = "";
expText.value = "";
fn.load("mylist.html");
}
function deleteItems(id)
{
db.transaction(function(tx)
{
tx.executeSql("DELETE FROM foodLogs WHERE ID=?", [id], gotSuccess, gotError);
});
}
var timer = null;
var end;
var toZero;
var btn = document.getElementById("btnAdd");
var oDay = document.getElementById("day");
var oHour = document.getElementById("hour");
var oMinute = document.getElementById("minute");
var oSecond = document.getElementById("second");
var endtime = document.getElementById("expiration");
var startBtn = document.getElementById("start-count");
toZero = oDay.innerHTML = oHour.innerHTML = oMinute.innerHTML = oSecond.innerHTML = "00";
startBtn.onclick = function() {
end = endtime.value;
if (!end) {
alert("Please enter date！")
return false;
};
countDown(tx, rs);
timer = setInterval(countDown, 1000);
}
function countDown(tx, rs) {
var timedate = new Date(Date.parse(end.replace(/-/g, "/")));
var now = new Date();
var date = (timedate.getTime() - now.getTime()) / 1000;
var day = Math.floor(date / (60 * 60 * 24));
var _hour = date - day * 60 * 60 * 24;
var hour = Math.floor(_hour / (60 * 60));
var _minute = _hour - hour * 60 * 60;
var minute = Math.floor(_minute / (60));
var _second = _minute - minute * 60;
var second = Math.floor(_second);
}
function toDou(n) {
if (n < 10) {
return '0' + n;
} else {
return '' + n;
}
}
if (date > 0) {
oDay.innerHTML = toDou(day);
oHour.innerHTML = toDou(hour);
oMinute.innerHTML = toDou(minute);
oSecond.innerHTML = toDou(second);
} else {
btn.className = "";
btn.className = "btn";
btn.onclick = function() {
alert("oops")
}
endtime.value = "";
clearInterval(timer);
toZero;
}
Edit: Current error is "Uncaught TypeError: Cannot set property 'innerHTML' of null" at line 106 which is toZero = oDay.innerHTML = oHour.innerHTML = oMinute.innerHTML = oSecond.innerHTML = "00";, haven't gotten any time output yet. It is instead giving undefined.
Edit: For the days, hours, minutes, and seconds I am receiving [object HTMLSpanElement] instead of the actual values behind the elements when viewing the page? Overall, the value isn't being read correctly.
Code Example: https://codepen.io/Wssoop/pen/poEbzve

My output is not displaying

So in HTML file I am taking in 6 numbers which will be used to determine the derivative for a user input amount of time. And this is the code that I have for the HTML
<body>
<h1>Enter your numbers:</h1>
<table>
<tr>
<h4>Enter your first number:</h4><input type="text" name="firstNum" id="first">
<h4>Enter your second number:</h4><input type="text" name="secondNum" id="second">
<h4>Enter your third number:</h4><input type="text" name="thirdNum" id="third">
<h4>Enter your fourth number:</h4><input type="text" name="fourthNum" id "fourth">
<h4>Enter your fifth number:</h4><input type="text" name="fifthNum" id="fifth">
<h4>Enter your sixth number:</h4><input type="text" name="sixthNum" id="sixth">
<h4>Enter the number of rows:</h4><input type="text" name="rowsNum" id="rows">
</tr>
</table>
<table style="width:100%">
<tr>
<th>y</th>
<th>&#9651y</th>
<th>&#9651<sup>2</sup>y</th>
<th>&#9651<sup>3</sup>y</th>
<th>&#9651<sup>4</sup>y</th>
</tr>
</table>
<button type="button" onclick="submitForCalc()">Submit</button>
<div id="tablePrint"> </div>
<script src="babbCore.js"> </script>
</body>
And in my js file I have
function submitForCalc()
{
/*
If no inputs are given the defaults will be 0
*/
var firstInput = 0;
var secondInput =0;
var thirdInput =0;
var fourthInput =0;
var fifthInput =0;
var sixthInput =0;
var rowInput = 1;
/*
Stores the user inputs into the values
*/
firstInput = document.getElementById("first").value;
secondInput = document.getElementById("second").value;
thirdInput = document.getElementById("third").value;
fourthInput = document.getElementById("fourth").value;
fifthInput = document.getElementById("fifth").value;
sixthInput = document.getElementById("sixth").value;
rowInput = document.getElementById("rows").value;
/*
stores the answer for each derivative into an array
*/
var zeroDir = new Array();
var firstDir = new Array();
var secondDir = new Array();
var thirdDir = new Array();
var fourthDir = new Array();
var fifthDir = new Array();
var myTable = "<table style="width:100%><tr>"; //the table of outputs
//This is where the calculations are done
var i =0;
for (i; i<rowInput; i++)
{
zeroDir[i] = (firstInput*Math.pow(i, 5))+(secondInput*Math.pow(i, 4))+(thirdInput*Math.pow(i, 3))+(fourthInput*Math.pow(i, 2))+(fifthInput*Math.pow(i, 1))+sixthInput;
firstDir[i] = ((5*firstInput)*Math.pow(i, 4))+((4*secondInput)*Math.pow(i, 3))+((3*thirdInput)*Math.pow(i, 2))+((2*fourthInput)*Math.pow(i, 1))+fifthInput;
secondDir[i] = ((20*firstInput)*Math.pow(i, 3))+((12*secondInput)*Math.pow(i, 2))+((6*thirdInput)*Math.pow(i, 1))+(2*fourthInput);
thirdDir[i] = ((60*firstInput)*Math.pow(i, 2))+((24*secondInput)*Math.pow(i, 1))+(6*thirdInput);
fourthDir[i] = ((120*firstInput)*Math.pow(i, 1))+(24*secondInput);
fifthDir[i] = (120*firstInput);
}
//This is where the output is created
for (var j=0; j<i; j++)
{
myTable += "<th>"+zeroDir[j] + "</th>"+ "<th>"+firstDir[j] +"</th>"+ "<th>"+secondDir[j] + "</th>"+ "<th>"+thirdDir[j] + "</th>"+ "<th>" + fourthDir[j] + "</th>" + "<th>" +fifthDir[j]+ "</th>";
}
myTable+="</tr></table>";
document.getElementById('tablePrint').innerHTML = myTable;
}
I have everything set. When the user enters all the numbers the first to the fifth derivative will be calculated and stored into an array. After all the calculations are done it will then insert all the outputs into a table where it will be displayed in a table format. I used an alert to test weather or not my function was being called, and it was not. Any help would be appreciated.

Few things here
Never mix your markup with javascript
Try binding events at javascript end
Dont write strings as "".Make use of createElement and insertRows
Break down your code into multiple methods/subroutines it is diffilcut to understand if it takes more than 10 lines
window.onload = function() {
var submit = document.getElementById('submit');
submit.addEventListener('click', submitForCalc);
}
function submitForCalc() {
var firstInput = 0;
var secondInput = 0;
var thirdInput = 0;
var fourthInput = 0;
var fifthInput = 0;
var sixthInput = 0;
var rowInput = 1;
firstInput = document.getElementById("first").value;
secondInput = document.getElementById("second").value;
thirdInput = document.getElementById("third").value;
var fourthInput = document.getElementById("fourth").value;
fifthInput = document.getElementById("fifth").value;
sixthInput = document.getElementById("sixth").value;
rowInput = document.getElementById("rows").value;
/*
stores the answer for each derivative into an array
*/
var zeroDir = new Array();
var firstDir = new Array();
var secondDir = new Array();
var thirdDir = new Array();
var fourthDir = new Array();
var fifthDir = new Array();
var myTable = document.createElement('table');
myTable.style.width = "100%";
myTable.style.border = "1";
var i = 0;
for (var i = 0; i < rowInput; i++) {
zeroDir[i] = (firstInput * Math.pow(i, 5)) + (secondInput * Math.pow(i, 4)) + (thirdInput * Math.pow(i, 3)) + (fourthInput * Math.pow(i, 2)) + (fifthInput * Math.pow(i, 1)) + sixthInput;
firstDir[i] = ((5 * firstInput) * Math.pow(i, 4)) + ((4 * secondInput) * Math.pow(i, 3)) + ((3 * thirdInput) * Math.pow(i, 2)) + ((2 * fourthInput) * Math.pow(i, 1)) + fifthInput;
secondDir[i] = ((20 * firstInput) * Math.pow(i, 3)) + ((12 * secondInput) * Math.pow(i, 2)) + ((6 * thirdInput) * Math.pow(i, 1)) + (2 * fourthInput);
thirdDir[i] = ((60 * firstInput) * Math.pow(i, 2)) + ((24 * secondInput) * Math.pow(i, 1)) + (6 * thirdInput);
fourthDir[i] = ((120 * firstInput) * Math.pow(i, 1)) + (24 * secondInput);
fifthDir[i] = (120 * firstInput);
}
var header = myTable.createTHead();
var row = header.insertRow(0);
//This is where the output is created
for (var j = 0; j < i; j++) {
var thElement_1 = document.createElement('th');
thElement_1.innerHTML = zeroDir[j];
row.appendChild(thElement_1);
var thElement_2 = document.createElement('th');
thElement_2.innerHTML = firstDir[j];
row.appendChild(thElement_2);
var thElement_3 = document.createElement('th');
thElement_3.innerHTML = secondDir[j];
row.appendChild(thElement_3);
var thElement_4 = document.createElement('th');
thElement_4.innerHTML = thirdDir[j];
row.appendChild(thElement_4);
var thElement_5 = document.createElement('th');
thElement_5.innerHTML = fourthDir[j];
row.appendChild(thElement_5);
}
var printTable = document.getElementById('tablePrint');
printTable.append(myTable);
}
<h1>Enter your numbers:</h1>
<table>
<tr>
<h4>Enter your first number:</h4>
<input type="text" name="firstNum" id="first">
<h4>Enter your second number:</h4>
<input type="text" name="secondNum" id="second">
<h4>Enter your third number:</h4>
<input type="text" name="thirdNum" id="third">
<h4>Enter your fourth number:</h4>
<input type="text" name="fourthNum" id="fourth">
<h4>Enter your fifth number:</h4>
<input type="text" name="fifthNum" id="fifth">
<h4>Enter your sixth number:</h4>
<input type="text" name="sixthNum" id="sixth">
<h4>Enter the number of rows:</h4>
<input type="text" name="rowsNum" id="rows">
</tr>
</table>
<table style="width:100%">
<tr>
<th>y</th>
<th>&#9651y</th>
<th>&#9651<sup>2</sup>y</th>
<th>&#9651<sup>3</sup>y</th>
<th>&#9651<sup>4</sup>y</th>
</tr>
</table>
<button type="button" id="submit" >Submit</button>
<div id="tablePrint"></div>
Hope this helps

The primary change is, as wrote in a comment in the question, to change the definition of the table variable
var myTable = "<table style='width:100%'><tr>";
Coding on snippet i also had to change another line, but i was not able to find it again looking at the question, so i guess it was a problem with copy/paste.
Than it was everything working itself.
Sorry for delay adding details, but i was not here.
edit 2
The second problem was the definition in the html of <input type="text" name="fourthNum" id "fourth">. It was missing the =, so that i placed
The error got before this change was "trying to get property value of null", since off course it was impossible to find an element with id fourth before the edit.
function submitForCalc() {
/*
If no inputs are given the defaults will be 0
*/
var firstInput = 0;
var secondInput = 0;
var thirdInput = 0;
var fourthInput = 0;
var fifthInput = 0;
var sixthInput = 0;
var rowInput = 1;
/*
Stores the user inputs into the values
*/
firstInput = document.getElementById("first").value;
secondInput = document.getElementById("second").value;
thirdInput = document.getElementById("third").value;
fourthInput = document.getElementById("fourth").value;
fifthInput = document.getElementById("fifth").value;
sixthInput = document.getElementById("sixth").value;
rowInput = document.getElementById("rows").value;
/*
stores the answer for each derivative into an array
*/
var zeroDir = new Array();
var firstDir = new Array();
var secondDir = new Array();
var thirdDir = new Array();
var fourthDir = new Array();
var fifthDir = new Array();
var myTable = "<table style='width:100%'><tr>"; //the table of outputs
//This is where the calculations are done
var i = 0;
for (i; i < rowInput; i++) {
zeroDir[i] = (firstInput * Math.pow(i, 5)) + (secondInput * Math.pow(i, 4)) + (thirdInput * Math.pow(i, 3)) + (fourthInput * Math.pow(i, 2)) + (fifthInput * Math.pow(i, 1)) + sixthInput;
firstDir[i] = ((5 * firstInput) * Math.pow(i, 4)) + ((4 * secondInput) * Math.pow(i, 3)) + ((3 * thirdInput) * Math.pow(i, 2)) + ((2 * fourthInput) * Math.pow(i, 1)) + fifthInput;
secondDir[i] = ((20 * firstInput) * Math.pow(i, 3)) + ((12 * secondInput) * Math.pow(i, 2)) + ((6 * thirdInput) * Math.pow(i, 1)) + (2 * fourthInput);
thirdDir[i] = ((60 * firstInput) * Math.pow(i, 2)) + ((24 * secondInput) * Math.pow(i, 1)) + (6 * thirdInput);
fourthDir[i] = ((120 * firstInput) * Math.pow(i, 1)) + (24 * secondInput);
fifthDir[i] = (120 * firstInput);
}
//This is where the output is created
for (var j = 0; j < i; j++) {
myTable += "<th>" + zeroDir[j] + "</th>" + "<th>" + firstDir[j] + "</th>" + "<th>" + secondDir[j] + "</th>" + "<th>" + thirdDir[j] + "</th>" + "<th>" + fourthDir[j] + "</th>" + "<th>" + fifthDir[j] + "</th>";
}
myTable += "</tr></table>";
document.getElementById('tablePrint').innerHTML = myTable;
}
<body>
<h1>Enter your numbers:</h1>
<table>
<tr>
<h4>Enter your first number:</h4>
<input type="text" name="firstNum" id="first">
<h4>Enter your second number:</h4>
<input type="text" name="secondNum" id="second">
<h4>Enter your third number:</h4>
<input type="text" name="thirdNum" id="third">
<h4>Enter your fourth number:</h4>
<input type="text" name="fourthNum" id="fourth">
<h4>Enter your fifth number:</h4>
<input type="text" name="fifthNum" id="fifth">
<h4>Enter your sixth number:</h4>
<input type="text" name="sixthNum" id="sixth">
<h4>Enter the number of rows:</h4>
<input type="text" name="rowsNum" id="rows">
</tr>
</table>
<table style="width:100%">
<tr>
<th>y</th>
<th>&#9651y</th>
<th>&#9651<sup>2</sup>y</th>
<th>&#9651<sup>3</sup>y</th>
<th>&#9651<sup>4</sup>y</th>
</tr>
</table>
<button type="button" onclick="submitForCalc()">Submit</button>
<div id="tablePrint"></div>
<script src="babbCore.js">
</script>
</body>

Calculate Percentage in HTML Table - jQuery

I am just trying to get the percentage in html table in second row
Database Consensus.
So just tried that jQuery
var TableData = new Array();
jQuery('#myTable tr').each(function(row, tr){
TableData[row]={
"1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
, "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
, "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
, "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
}
});
TableData.shift();
TableData.sort();
var First = [];
var Second = [];
var Third = [];
var Fourth = [];
for (var i = 0; i < TableData.length - 1; i++) {
if (TableData[i + 1]['1st'] == TableData[i]['1st']) {
First.push(TableData[i]['1st']);
}
if (TableData[i + 1]['2nd'] == TableData[i]['2nd']) {
Second.push(TableData[i]['2nd']);
}
if (TableData[i + 1]['3rd'] == TableData[i]['3rd']) {
Third.push(TableData[i]['3rd']);
}
if (TableData[i + 1]['4th'] == TableData[i]['4th']) {
Fourth.push(TableData[i]['4th']);
}
}
var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");
But i am not getting right percentage :(
I am not have very good experience in jQuery but tried Here is demo
http://jsfiddle.net/bcHsy/33/

I am not much of a Fiddler, so I'm not sure that the link will even work, but I think that this might work:
Fiddle Link
I mostly changed the HTML in one section:
<tr>
<td align="center" valign="middle" bgcolor="#ffffff">
<p align="left">
<span style="color: #d89b5a;"><strong>Database Consensus</strong></span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;">-------</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="1st">L.Tunsil</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="2nd">C.Wentz</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="3rd">J.Ramsey</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="4th">M.Jack</span>
</p>
</td>
</tr>
and some of the JS:
var TableData = new Array();
var Picks = new Array();
jQuery('#myTable tr').each(function(row, tr){
if (row == 1) {
Picks[0] = jQuery.trim(jQuery(tr).find('td:eq(2)').text());
Picks[1] = jQuery.trim(jQuery(tr).find('td:eq(3)').text());
Picks[2] = jQuery.trim(jQuery(tr).find('td:eq(4)').text());
Picks[3] = jQuery.trim(jQuery(tr).find('td:eq(5)').text());
}
TableData[row]={
"1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
, "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
, "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
, "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
}
});
TableData.shift();
TableData.shift();
TableData.sort();
var First = [];
var Second = [];
var Third = [];
var Fourth = [];
for (var i = 0; i < TableData.length; i++) {
if (TableData[i]['1st'] == Picks[0]) {
First.push(TableData[i]['1st']);
}
if (TableData[i]['2nd'] == Picks[1]) {
Second.push(TableData[i]['2nd']);
}
if (TableData[i]['3rd'] == Picks[2]) {
Third.push(TableData[i]['3rd']);
}
if (TableData[i]['4th'] == Picks[3]) {
Fourth.push(TableData[i]['4th']);
}
}
var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");

Parsing to a table in Javascript

I'm trying to create a calander that can later be styled with CSS. Here is the JS and HTML codes. There is a CSS stylesheet as well but its just used for color and positioning. In the Javascript, I would like to build the table based off the first and last days of the month and insert a new row at the end of each week. As is the Javascript does nothing. When you remove the first if statement, it seems to iterate only once. I'm not sure where I'm screwing up in trying to create the table.
function setDate() {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
document.getElementById("myDay").value = day;
document.getElementById("myMonth").value = month;
document.getElementById("myYear").value = year;
}
function buildCalendar() {
var firstDate = new Date(document.getElementById("myYear").value, document.getElementById("myMonth").value, 1);
var weekDay = firstDate.getDay();
var theDate = firstDate.getDate();
var theMonth = firstDate.getMonth();
var theYear = firstDate.getFullYear();
var newDay = new Date(theYear, theMonth + 1, 1);
var lastDate = new Date(newDay - 1);
var lastDay = lastDate.getDate();
document.write("<table class='caltable' border='1'><tr><th>");
document.write("<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th>");
document.write("</th></tr>");
var col = 0;
for (var i = theDate; i < lastDay + 1; i++) {
if (col == 0) {
document.write("<tr><td>" + i "</td>");
}
if (col == 6) {
document.write("<td>" + i + "</td></tr>");
col == 0;
} else {
document.write("<td>" + i + "</td>");
col++;
}
}
document.write("</table>");
}
function getMonthName() {
var e = getElementById("myMonth").selectedIndex;
var monthName = e.options[e.selectedIndex].text;
return monthName;
}
Here is the HTML file. It's basically just a wrapper div with some other divs inside for holding the calendar eventually a scheduler, as well as the current date. Right now I'm simply trying to get the the table (see the javascript) to build. Ideally it would be in the div with the id "bottomLeft".
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "./CSS/calendar.css">
<script type = "text/javascript" src = "./Calendar/calendar.js"></script>
<script type = "text/javascript" src = "./Calendar/task.js"></script>
</head>
<body onLoad = "setDate(); buildCalendar();">
<div id = "wrapper">
<div id = "left"> Left Div </div>
<div id = "right"> Right Div </div>
<div id = "bottomLeft"> Shows calendar </div>
<div id = "topLeft"> Day:<input id = "myDay" type="number" min = "1" max = "31">Month:<select id = "myMonth"><option value = "0">January</option> <option value = "1">February</option><option value = "2">March</option><option value = "3">April</option><option value = "4">May</option><option value = "5">June</option><option value = "6">July<option value = "7">August</option><option value = "8">September</option><option value = "9">October</option><option value = "10">November</option><option value = "11">December</option></select> Year:<input id = "myYear" type = "number" min = "100"> TopLeft Div shows form components for date </div>
<div id = "topRight"> Shows the form to add task </div>
<div id = "bottomRight"> Show list of tasks </div>
</div>
</body>
</html>

In addition to the mistakes Ceesie123456 mentioned, you need to remove the extra <tr><th> from the opening table tag string. As a means of getting the calendar into the bottomLeft div, you can use set the element's innerHTML property. Finally, you're missing a piece of logic which check for when the end of the calendar is not the end of a row, which means the table won't line up correctly. So, an example:
function buildCalendar(){
var firstDate = new Date(document.getElementById("myYear").value, document.getElementById("myMonth").value, 1);
var weekDay = firstDate.getDay();
var theDate = firstDate.getDate();
var theMonth = firstDate.getMonth();
var theYear = firstDate.getFullYear();
var newDay = new Date(theYear, theMonth + 1, 1);
var lastDate = new Date(newDay - 1);
var lastDay = lastDate.getDate();
var tableString = ("<table class='caltable' border='1'>");
tableString = tableString + ("<thead><tr><tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr></thead>");
tableString = tableString + "<tbody>";
var col = 0;
for (var i = theDate; i <= lastDay; i++)
{
if(col == 0)
{
tableString = tableString + ("<tr>");
}
tableString = tableString + "<td>" + i + "</td>";
if (col == 6 || i == lastDay)
{
tableString = tableString + ("</tr>");
col = 0;
}
else
{
col++;
}
}
tableString = tableString + ("</tbody></table>");
document.getElementById("bottomLeft").innerHTML = tableString;
}

U made a few mistakes in ur Javascript code.
if (col == 6)
{
document.write("<td>" + i + "</td></tr>");
col == 0; //this should be changed to col = 0; with col = 0; u set col to 0.
}
and
if(col == 0)
{
document.write("<tr><td>" + i "</td>");
}
u should change it to:
if(col == 0)
{
document.write("<tr><td>" + i + "</td>"); // combine string with variable and string.
}

Beginner JavaScript help(functions)

I'm having some trouble copying the scripts and HTML from the calender on refdesk.com. I need put the JavaScript on a different style sheet and use those functions to recreate the calender on a HTML page. Here is what I have so far, any tips will help. This is a homework assignment so I'm not looking for the answers.
JavaScript -
function initialize()
{
buildCal();
updateCalender();
}
var themonths = ['January','February','March','April','May','June',
'July','August','September','October','November','December'];
var todaydate = new Date();
var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
var curyear = todaydate.getFullYear(); //get current year
function buildCal(month, year, cM, cH, cDW, cD, border)
{
var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dim = [31,0,31,30,31,30,31,31,30,31,30,31];
var firstDaySelectedMonth = new Date(year, month - 1, 1); //DD replaced line to fix date bug when current day is 31st
firstDaySelectedMonth.od=firstDaySelectedMonth.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
var todaydate = new Date(); //DD added
var scanfortoday = (year == todaydate.getFullYear() && month == todaydate.getMonth() + 1) ? todaydate.getDate() : 0; //DD added
dim[1] = (((firstDaySelectedMonth.getFullYear() % 100 != 0) && (firstDaySelectedMonth.getFullYear() %4 == 0)) || (firstDaySelectedMonth.getFullYear() % 400 == 0)) ? 29 : 28;
var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
t += '<td colspan="7" align="center" class="' + cH + '">' + mn[month - 1] + ' - ' + year + '</td></tr><tr align="center">';
for (s = 0; s < 7; s++)
{
t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s,1) + '</td>';
t += '</tr><tr align="center">';
}
for(i = 1;i <= 42; i++)
{
var x = ((i-firstDaySelectedMonth.od >= 0) && (i-firstDaySelectedMonth.od < dim[month -1 ])) ? i-firstDaySelectedMonth.od + 1 : ' ';
if (x == scanfortoday) //DD added
{
x = '<span id="today">' + x + '</span>'; //DD added
t += '<td class="' + cD + '">' + x +'</td>';
}
if(((i) % 7 == 0) && (i < 36))
{
t += '</tr><tr align="center">';
}
}
return t += '</tr></table></div>';
}
// update calender function
function updateCalendar(theSelection)
{
var themonth = parseInt(theSelection[theSelection.selectedIndex].value) + 1;
var calendarstr = buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0);
if (document.getElementById)
{
document.getElementById("calendarspace").innerHTML = calendarstr;
}
document.write('<option value="'+(curmonth - 1) + '" selected="yes">Current Month</option>');
for (i = 0; i < 12; i++) //display option for 12 months of the year
{
document.write('<option value="' + i + '">' + themonths[i] + ' ' + curyear + '</option>');
}
}
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="refdesk.css">
<script src="refdesk.js"></script>
</head>
<body onload="initialize()">
<!-- CALENDAR START -->
<form>
<div id="choicespace">
<p>(This will be replaced with JavaScript-generated HTML)</p>
<select onchange="updatecalendar(this.options)">
<script>
updatecalendar(theselection);
</script>
<option value="1" selected="yes">Current Month</option><option value="0">January 2013</option><option value="1">February 2013</option><option value="2">March 2013</option><option value="3">April 2013</option><option value="4">May 2013</option><option value="5">June 2013</option><option value="6">July 2013</option><option value="7">August 2013</option><option value="8">September 2013</option><option value="9">October 2013</option><option value="10">November 2013</option><option value="11">December 2013</option>
</select>
</div>
<div id="calendarspace">
<p>(This will be replaced with JavaScript-generated HTML)</p>
</div>
</form>
</body>
</html>

First, try to figure how your javascript code really work. Take a look on calendar in javascript as a simple example.

Personally I would indent more to keep things organized. Another thing I would do is just make shorter variables because sometimes i find myself coding wrong because of my huge variable names.