Jump to content
jdubya

HELP WITH DISPLAYING TABLE

Recommended Posts

Hi, just wondering if anyone can help me, im trying to display my table above the statisics of the users input, but all it seems to do is split the table.

Not sure what im doing if anyone can give me some insight that would be great, thank you.

 

<!DOCTYPE html>
<html>
<body>
<p>GPA CALCULATOR</p>
</br>
<p>Course Code - Grade Value</p>

<p>Statistics</p>

<script>
  
//List of Course Code for Validation 
    var coursecode =["ACC1101","ACC3118","ACC5202","ACC5213","ACC5216","ACC5502","ACC8000","ACC8003","ACC8105","AGR2302","AGR3303","AGR3304","AGR3305","AGR4305","ANT1001","ANT2005","ANT2008","ANT3006","BCA3000","BCA4000","BCA8003","BIO1101","BIO1103","BIO1104","BIO1203","BIO1810","BIO2106","BIO2107","BIO2108","BIO2118","BIO2119","BIO3101","BIO3102","BIO3107","CDS1000","CHE1110","CIS1000","CIS2000","CIS2002","CIS3001","CIS3002","CIS3003","CIS3008","CIS5100","CIS5200","CIS5302","CIS5308","CIS8000","CIS8004","CIS8008","CIS8009","CIS8100","CIS8501","CIV1500","CIV2605","CIV2701","CIV3505","CIV3506","CIV3906","CIV4508","CIV5705","CLI1110","CLI3301","CMS1000","CMS1010","CMS1100","CMS2017","CMS2019","CSC1401","CSC1402","CSC2402","CSC2408","CSC3400","CSC3403","CSC3407","CSC3412","CSC3420","CSC3600","CSC8004","CSC8407","CSC8416","CSC8419","CSC8422","CSC8500","CSC8503","CSC8507","CSC8512","CSC8600","CWR1001","CWR2001","DCA9000","DCA9001","DCA9500","DCA9501","EAP7307","EAP7308","ECO1000","EDC1100","EDC1400","EDC2100","EDC2400","EDC3100","EDC4000","EDE2101","EDE3103","EDG3000","EDG5000","EDH1150","EDH2151","EDH2152","EDH3155","EDM8004","EDP2111","EDP4130","EDP4140","EDP4200","EDR8000","EDR8060","EDR8061","EDS2401","EDS3450","EDS4250","EDS4401","EDX1170","EDX1250","EDX2190","EDX2260","EDX3270","EDX3280","ELE1301","ELE1502","ELE2303","ELE2601","ELE2702","ELE2912","ELE3105","ELE3305","ELE3803","ELE3804","ELE3807","ELE3914","ELE4605","ELE4607","ELE5001","ENG1002","ENG1003","ENG1004","ENG1100","ENG1901","ENG2002","ENG3003","ENG3111","ENG4903","ENG5001","ENG8001","ENG8101","ENG8104","ENG8208","ENG8411","ENG8412","ENL1000","ENL2007","ENL3000","ENM1500","ENM1600","ENM2600","ENS7605","ENV2103","ENV2201","ENV3104","ENV4204","FIN1101","FIN2106","FIN2302","FIN3106","FIN3109","FIN5003","FIN8201","FIN1000","FIN1002","FIN1003","FIN2004","FIN2005","FIN2006","FIN3002","GIS1402","GIS3407","HEA8201","HIS1000","HIS2001","HIS8004","HMT2000","ACC1101","ACC3118","ACC5202","ACC5213","ACC5216","ACC5502","ACC8000","ACC8003","ACC8105","AGR2302","AGR3303","AGR3304","AGR3305","AGR4305","ANT1001","ANT2005","ANT2008","ANT3006","BCA3000","BCA4000","BCA8003","BIO1101","BIO1103","BIO1104","BIO1203","BIO1810","BIO2106","BIO2107","BIO2108","BIO2118","BIO2119","BIO3101","BIO3102","BIO3107","CDS1000","CHE1110","CIS1000","CIS2000","CIS2002","CIS3001","CIS3002","CIS3003","CIS3008","CIS5100","CIS5200","CIS5302","CIS5308","CIS8000","CIS8004","CIS8008","CIS8009","CIS8100","CIS8501","CIV1500","CIV2605","CIV2701","CIV3505","CIV3506","CIV3906","CIV4508","CIV5705","CLI1110","CLI3301","CMS1000","CMS1010","CMS1100","CMS2017","CMS2019","CSC1401","CSC1402","CSC2402","CSC2408","CSC3400","CSC3403","CSC3407","CSC3412","CSC3420","CSC3600","CSC8004","CSC8407","CSC8416","CSC8419","CSC8422","CSC8500","CSC8503","CSC8507","CSC8512","CSC8600","CWR1001","CWR2001","DCA9000","DCA9001","DCA9500","DCA9501","EAP7307","EAP7308","ECO1000","EDC1100","EDC1400","EDC2100","EDC2400","EDC3100","EDC4000","EDE2101","EDE3103","EDG3000","EDG5000","EDH1150","EDH2151","EDH2152","EDH3155","EDM8004","EDP2111","EDP4130","EDP4140","EDP4200","EDR8000","EDR8060","EDR8061","EDS2401","EDS3450","EDS4250","EDS4401","EDX1170","EDX1250","EDX2190","EDX2260","EDX3270","EDX3280","ELE1301","ELE1502","ELE2303","ELE2601","ELE2702","ELE2912","ELE3105","ELE3305","ELE3803","ELE3804","ELE3807","ELE3914","ELE4605","ELE4607","ELE5001","ENG1002","ENG1003","ENG1004","ENG1100","ENG1901","ENG2002","ENG3003","ENG3111","ENG4903","ENG5001","ENG8001","ENG8101","ENG8104","ENG8208","ENG8411","ENG8412","ENL1000","ENL2007","ENL3000","ENM1500","ENM1600","ENM2600","ENS7605","ENV2103","ENV2201","ENV3104","ENV4204","FIN1101","FIN2106","FIN2302","FIN3106","FIN3109","FIN5003","FIN8201","FIN1000","FIN1002","FIN1003","FIN2004","FIN2005","FIN2006","FIN3002","GIS1402","GIS3407","HEA8201","HIS1000","HIS2001","HIS8004","HMT2000","HMT4005","INR1000","INR2000","INR3000","INR8010","ISE1000","ISE1001","ISE2001","ISE2002","ISE3000","JRN1010","JRN2000","JRN2001","JRN3003","LAC1001","LAC2001","LAW1101","LAW1111","LAW1112","LAW1113","LAW1114","LAW2211","LAW2212","LAW2213","LAW3130","LAW3311","LAW3312","LAW3467","LAW3469","LAW3471","LAW3473","LAW5230","LAW8001","LAW8715","MAT1000","MAT1101","MAT1102","MAT2409","MAT3201","MAT8180","MBA8000","MEC1201","MEC2101","MEC2202","MEC2402","MEC2405","MEC2901","MEC2902","MEC3102","MEC3203","MEC3302","MEC4103","MGT1000","MGT1001","MGT2001","MGT2204","MGT3001","MGT3005","MGT5000","MGT8002","MKT1001","MKT1002","MKT2013","MKT2015","MSC8001","MSC8002","MUI1001","MUI1007","MUI1008","MUI2002","MUI2003","MUI2006","MUI2020","MUI3005","MUI3010","MUI4002","NSC2500","NUR1100","NUR1102","NUR2100","NUR2200","NUR2300","NUR2499","NUR2800","NUR3010","POL1000","POL2000","PRL1002","PRL2002","PRL2003","PSY1010","PSY1020","PSY2010","PSY2020","PSY2100","PSY3010","PSY3030","PSY3060","REN1201","REN2200","RSH8000","RSH8001","SCI1001","SCI4405","SES1299","SES2101","SES2102","SES2103","SES2104","SES3101","SES3102","SES3204","SES8003","SES8005","SES8008","SES8299","SOC1000","SPE3005","SPE3009","STA2300","STA2301","STA3300","STA8005","SVY1102","SVY1901","SVY2105","SVY2106","SVY2301","SVY2302","SVY2902","SVY3202","SVY4309","THE1001","THE1021","THE1022","THE2003","THE2006","THE2009","THE2011","THE3011","URP1001","URP2001","URP4002","VSA1002","VSA1004","VSA2000","VSA2002","VSA2004","VSA3004","VSA3021","HMT4005","INR1000","INR2000","INR3000","INR8010","ISE1000","ISE1001","ISE2001","ISE2002","ISE3000","JRN1010","JRN2000","JRN2001","JRN3003","LAC1001","LAC2001","LAW1101","LAW1111","LAW1112","LAW1113","LAW1114","LAW2211","LAW2212","LAW2213","LAW3130","LAW3311","LAW3312","LAW3467","LAW3469","LAW3471","LAW3473","LAW5230","LAW8001","LAW8715","MAT1000","MAT1101","MAT1102","MAT2409","MAT3201","MAT8180","MBA8000","MEC1201","MEC2101","MEC2202","MEC2402","MEC2405","MEC2901","MEC2902","MEC3102","MEC3203","MEC3302","MEC4103","MGT1000","MGT1001","MGT2001","MGT2204","MGT3001","MGT3005","MGT5000","MGT8002","MKT1001","MKT1002","MKT2013","MKT2015","MSC8001","MSC8002","MUI1001","MUI1007","MUI1008","MUI2002","MUI2003","MUI2006","MUI2020","MUI3005","MUI3010","MUI4002","NSC2500","NUR1100","NUR1102","NUR2100","NUR2200","NUR2300","NUR2499","NUR2800","NUR3010","POL1000","POL2000","PRL1002","PRL2002","PRL2003","PSY1010","PSY1020","PSY2010","PSY2020","PSY2100","PSY3010","PSY3030","PSY3060","REN1201","REN2200","RSH8000","RSH8001","SCI1001","SCI4405","SES1299","SES2101","SES2102","SES2103","SES2104","SES3101","SES3102","SES3204","SES8003","SES8005","SES8008","SES8299","SOC1000","SPE3005","SPE3009","STA2300","STA2301","STA3300","STA8005","SVY1102","SVY1901","SVY2105","SVY2106","SVY2301","SVY2302","SVY2902","SVY3202","SVY4309","THE1001","THE1021","THE1022","THE2003","THE2006","THE2009","THE2011","THE3011","URP1001","URP2001","URP4002","VSA1002","VSA1004","VSA2000","VSA2002","VSA2004","VSA3004","VSA3021"];

// Course Code and Grade Value Arrays
    var courseCodeArray = [];
    var gradeValueArray = [];

// Prompt for User to Enter Their Courses Codes which is then Looped Until a Valid Respond
// is Entered
    var input_coursecode = prompt("Please Enter Your Course Code?", "");
    var a = coursecode.indexOf(input_coursecode);
    while(a == -1)
        {
    alert("The Code you Entered is not a Valid Course Code, Please Try Again");
    var input_coursecode = prompt("Please Enter Your Course Code?", "");
    var a = coursecode.indexOf(input_coursecode);
        }

    courseCodeArray.push(input_coursecode);

// Prompt for User to Enter Their Grade Value which is then Looped Until a Valid Respond
// is Entered
    var input_gradeValue = parseInt(prompt("Please Enter Your Grade for this Course?", ""));
    while(input_gradeValue > 7 || input_gradeValue < 1)
        {
    alert("The Grade you Entered is Not Valid, Please Try Again!");
    var input_gradeValue = parseInt(prompt("Please Enter Your Grade for this Course?", ""));
        }
    gradeValueArray.push(input_gradeValue);

    var askUser = confirm("Would You Like to add Another Course?");
    while(askUser == true)
        {
    
    var input_coursecode = prompt("Please Enter Your Course Code?", "");
    var a = coursecode.indexOf(input_coursecode);
    while(a == -1)
        {
        alert("The Code you Entered is not a Valid Course Code, Please Try Again");
        var input_coursecode = prompt("Please Enter Your Course Code?", "");
        var a = coursecode.indexOf(input_coursecode);
        }
    courseCodeArray.push(input_coursecode);

    
    var input_gradeValue = parseInt(prompt("Please Enter Your Grade for this Course?", ""));
    while(input_gradeValue > 7 || input_gradeValue < 1)
        {
        alert("The Grade you Entered is Not Valid, Please Try Again!");
        var input_gradeValue = parseInt(prompt("Please Enter Your Grade for this Course?", ""));
        }
    gradeValueArray.push(input_gradeValue);


    var askUser = confirm("Would You Like to add Another Course?");
        }
 
// Table Listing Course Codes Enters and Grades
    for (var i = 0; i < courseCodeArray.length; i++) {
   document.writeln('<table border="1">'); 
   document.writeln('<tr>');
   document.writeln('<td>'+courseCodeArray+'</td>');
   document.writeln('<td>'+gradeValueArray+'</td>');
   document.writeln('</tr>');
        }


// Number of Courses the User has Completed:
    var lengthofCourseCode = courseCodeArray.length;
    document.write("Number of courses completed: " + lengthofCourseCode + "</br>");

//Highest Grade Value
    document.write("Highest Grade Value: " + Math.max.apply(null,gradeValueArray) + "</br>");

//Lowest Grade Value
    document.write("Lowest Grade Value: " + Math.min.apply(null,gradeValueArray) + "</br>");

//GPA CALCULATOR

//GPA Score
    var sumofGradeValue = 0;
    for(var i=0, n=gradeValueArray.length; i < n; i++) 
        { 
  sumofGradeValue += gradeValueArray
        }

    var actualGPA = sumofGradeValue/lengthofCourseCode;
    document.write("GPA : " + actualGPA + "</br>");


</script>
</body>
</html>
 

Share this post


Link to post
Share on other sites

That is what you have programed it to do, every grade etc in the for loop create opening table tag, and because you don't have a closing table tag, when it loops again, it adds the closing table tag for you.

The opening and closing table tags <table>.....</table> should be outside the for loop for single table, inside for multiple tables.

Share this post


Link to post
Share on other sites

sorry when you say outside the loop im not sure exactly what you mean? im quite new to javascript/programming, to move this table to outside the script section but doesnt seem to work, apologies for my lack of knowledge. Any help would be great @dsonesuk

Share this post


Link to post
Share on other sites

You have a for loop that loops through the records.  Inside the loop you start a new table for each record, you have an opening table tag inside the loop.  You don't have any closing table tags though.

You shouldn't use document.write or document.writeln though, those are ancient and aren't used anymore.  You should build an HTML string that you can add to, and then at the end of the code you write that HTML to an element on the page.  So you should put a container element on the page like a div:

<div id="content"></div>

And then build your HTML string in Javascript, e.g.:

var html_str = '<table border="1">';
for (var i = 0; i < courseCodeArray.length; i++) { 
   html_str += '<tr>';
   html_str += '<td>'+courseCodeArray+'</td>';
...
}
html_str += '</table>';

And then at the end write the HTML string to your placeholder element:

document.getElementById('content').innerHTML = html_str;

 

Share this post


Link to post
Share on other sites

Im sorry ive tried to make the changes you suggested but cant seem to get the table to work ive added the closing tag but its still not working. Im extremely new at this so some concepts are a little hard for me to imagine. Below Is what i did but kept the document.write as thats all ive been taught at the moment and just wanted to stick with that, i know its ancient. @justsomeguy

// Table Listing Course Codes Enters and Grades
    
    for (var i = 0; i < courseCodeArray.length; i++) {
   document.writeln('<table border="1">'); 
   document.writeln('<tr>');
   document.writeln('<td>'+courseCodeArray+'</td>');
   document.writeln('<td>'+gradeValueArray+'</td>');
   document.writeln('</tr>');
        }
        <\table>
 ;

 

Share this post


Link to post
Share on other sites

Lets say you loop through the 'for loop' twice, you will get

<table>

<tr><td></td><td></td></tr>

<table>

<tr><td></td><td></td></tr>

</table>

For every opening <table> tag there must be a equally corresponding closing </table> tag, even though your table layout is incomplete and wrong, your browser will correct this by adding closing </table> before second <table>, and therefore will show two tables, because two loops equals two opening table tags with single <tr> row, with two <td> cells showing data.

Whereas

document.writeln('<table border="1">');

for (var i = 0; i < courseCodeArray.length; i++) {
  
   document.writeln('<tr>');
   document.writeln('<td>'+courseCodeArray+'</td>');
   document.writeln('<td>'+gradeValueArray+'</td>');
   document.writeln('</tr>');


        }
        document.writeln('</table>');

Will produce

<table>(outside before 'for loop')

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

</table>(outside after 'for loop' closing curly bracket '}')

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×