jdubya Posted April 26, 2017 Share Posted April 26, 2017 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2017 Share Posted April 26, 2017 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. Link to comment Share on other sites More sharing options...
jdubya Posted April 26, 2017 Author Share Posted April 26, 2017 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 27, 2017 Share Posted April 27, 2017 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; Link to comment Share on other sites More sharing options...
jdubya Posted April 27, 2017 Author Share Posted April 27, 2017 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> ; Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2017 Share Posted April 27, 2017 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 '}') Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now