javascript - How do I create a simple form to table webpage in HTML? -
i working on simple webpage run work computer. vast majority of websites blocked on work computer, hoping accomplish task using simple combination of html + css + javascript.
the idea user selects multiple checkboxes exams interested in, , clicks "generate sheet" button open separate tab displays table of break schedules of selected exams.
i have started working on basics of code keep getting errors keep me moving forward.
google chrome's console debugger gives me following errors:
- uncaught syntaxerror: invalid or unexpected token (foracey.html:59)
- uncaught referenceerror: checks not defined @ htmlbuttonelement.onclick (foracey.html:33)
the second error shows when click "generate sheet" button.
would able figure out mistakes , how correct them?
additionally, have tips improving code in general?
i have attached code snippet below.
<html> <head> <title>break schedules</title> <!-- style --> <link rel="stylesheet" href="foracey.css"/> <!-- scripts --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <h2>break schedules</h2> <!-- form --> <div> <form id="dateform"> <b>date:</b> <input id=dateid type="date" name="mydate"><br> </form> <h4>check off exams need.</h4> <div> <form id="checkform"> <input type = "checkbox" id="exam1" name="exam1" value="exam1">exam1<br> <input type = "checkbox" id="exam2" name="exam2" value="exam2">exam2<br> <input type = "checkbox" id="exam3" name="exam3" value="exam3">exam3<br> </form> </div> <button onclick="checks()">generate sheet</button><br> <br> <button onclick="location.reload()">reset form</button> </div> <script> $(document).keydown(function(e){ if (e.keycode == 13) { checks(); return false; } }); function checks(){ <!-- date --> var x = document.getelementbyid("dateform"); var the_date = ""; var i; for (i = 0; < x.length ;i++) { the_date += x.elements[i].value + "<br>"; } } var checkexam1=document.getelementbyid("exam1").checked; var checkexam2=document.getelementbyid("exam2").checked; var checkexam3=document.getelementbyid("exam3").checked; final_string="<html><h2>"+the_date+"</h2> if (exam1==true){ final_string+="<tr><td>exam1</td><td>this break schedule exam1</td></tr>"; } if (exam2==true){ final_string+="<tr><td>step 1-2-3</td><td>this break schedule exam2</td></tr>"; } if (exam3==true){ final_string+="<tr><td>pmi</td><td>this break schedule exam3</td></tr>"; } final_string+="</table></html>" var new_page=window.open('','name'); new_page.document.write(final_string); new_page.document.close(); </script </body> </html>
there several errors in script.
- the ending script tag not closed properly:
</scriptshould</script>. - the function checks should wrap around below it, otherwise part of script below checks executed when page loads.
- instead of testing
exam1 == true, need testcheckexam1 == truebecause variable called. use strict equality operator safe:checkexam1 === true. - there no beginning
<table>tag.
here script corrections:
$(document).keydown(function(e) { if (e.keycode == 13) { checks(); return false; } }); function checks() { <!-- date --> var x = document.getelementbyid("dateform"); var the_date = ""; var i; (i = 0; < x.length; i++) { the_date += x.elements[i].value + "<br>"; } var checkexam1 = document.getelementbyid("exam1").checked; var checkexam2 = document.getelementbyid("exam2").checked; var checkexam3 = document.getelementbyid("exam3").checked; var final_string = "<html><h2>" + the_date + "</h2><table>"; if (checkexam1 === true) { final_string += "<tr><td>exam1</td><td>this break schedule exam1</td></tr>"; } if (checkexam2 === true) { final_string += "<tr><td>step 1-2-3</td><td>this break schedule exam2</td></tr>"; } if (checkexam3 === true) { final_string += "<tr><td>pmi</td><td>this break schedule exam3</td></tr>"; } final_string += "</table></html>"; var new_page = window.open('', 'name'); new_page.document.body.innerhtml = final_string; new_page.document.close(); } view working demo: http://plnkr.co/lewfz4ud4t3sopni6ipl
and not forget add missing > ending script tag!
additionally, have tips improving code in general?
since using jquery already, useful learn how manipulate elements directly instead of creating strings of html tags. can learn more @ jquery learning center, section on manipulating elements.
Comments
Post a Comment