2017-07-28 158 views
-1

我正在從我的工作計算機上運行一個簡單的網頁。絕大多數網站在我的工作計算機上被阻止,所以我希望能夠使用HTML + CSS + Javascript的簡單組合完成此任務。如何在HTML中創建表格網頁的簡單表單?

這個想法是,用戶爲他感興趣的考試選擇多個複選框,然後他點擊「生成工作表」按鈕,該工具欄將打開一個單獨的選項卡,該選項卡僅顯示所選考試的休息時間表。

我已經開始研究代碼的基礎知識,但是我不斷收到一些使我無法繼續前進的錯誤。

谷歌Chrome瀏覽器的控制檯調試器給了我以下錯誤:

  1. 未捕獲的SyntaxError:無效的或意外的標記(forAcey.html:59)
  2. 未捕獲的ReferenceError:檢查在HTMLButtonElement.onclick沒有定義 ( forAcey.html:33)

單擊「生成工作表」按鈕時顯示第二個錯誤。

你能幫我們弄清楚我的錯誤在哪裏以及如何糾正它們?

此外,您是否有任何改進我的代碼的提示?

我附上了我的代碼片段。

<html> 
 

 
<head> 
 
\t <title>Break Schedules</title> 
 
\t 
 
\t <!-- Style --> 
 
\t <link rel="stylesheet" href="forAcey.css"/> \t 
 
\t 
 
\t <!-- Scripts --> 
 
\t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> \t 
 
</head> 
 

 
<body> 
 
\t <h2>Break Schedules</h2> 
 

 
\t <!-- Form --> 
 
\t <div> 
 
\t \t <form id="DateForm"> 
 
\t \t \t <b>Date:</b> 
 
\t \t \t <input id=DateID type="Date" name="myDate"><br> 
 
\t \t </form> 
 
\t \t 
 
\t \t <h4>Check off the exams you need.</h4> 
 
\t \t 
 
\t \t <div> 
 
\t \t \t <form id="CheckForm"> 
 
\t \t \t \t <input type = "checkbox" id="exam1" name="exam1" value="exam1">exam1<br> 
 
\t \t \t \t <input type = "checkbox" id="exam2" name="exam2" value="exam2">exam2<br> 
 
\t \t \t \t <input type = "checkbox" id="exam3" name="exam3" value="exam3">exam3<br> 
 
\t \t \t </form> \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <button onclick="Checks()">Generate Sheet</button><br>&nbsp<br> 
 
\t \t <button onclick="location.reload()">Reset Form</button> 
 
\t </div> 
 
\t 
 
\t <script> 
 
\t \t $(document).keydown(function(e){ 
 
\t \t \t if (e.keyCode == 13) { 
 
\t \t \t \t Checks(); 
 
\t \t \t return false; 
 
\t \t \t } 
 
\t \t }); 
 
\t \t 
 
\t \t function Checks(){ \t \t \t 
 
\t \t <!-- Date --> 
 
\t \t var x = document.getElementById("DateForm"); 
 
\t \t var The_Date = ""; 
 
\t \t var i; 
 
\t \t for (i = 0; i < x.length ;i++) { 
 
\t \t \t The_Date += x.elements[i].value + "<br>"; 
 
\t \t } 
 
\t } 
 

 
\t var checkexam1=document.getElementById("exam1").checked; 
 
\t var checkexam2=document.getElementById("exam2").checked; 
 
\t var checkexam3=document.getElementById("exam3").checked; 
 
\t 
 
\t final_string="<html><h2>"+The_Date+"</h2> 
 
\t 
 
\t if (exam1==true){ 
 
       final_string+="<tr><td>exam1</td><td>this is the break schedule for exam1</td></tr>"; 
 
      } 
 
\t if (exam2==true){ 
 
       final_string+="<tr><td>STEP 1-2-3</td><td>this is the break schedule for exam2</td></tr>"; 
 
      } 
 
\t if (exam3==true){ 
 
       final_string+="<tr><td>PMI</td><td>this is the break schedule for exam3</td></tr>"; 
 
      } 
 
\t 
 
\t final_string+="</table></html>" 
 
      var new_page=window.open('','name'); 
 
      new_page.document.write(final_string); 
 
      new_page.document.close(); 
 

 
\t 
 
\t </script 
 
</body> 
 
</html>

+0

很快,我看到你有多行字符串,這是不允許在JavaScript(事實上,它是允許的,但你必須使用反向和IE瀏覽器的兼容性問題)。 –

+0

我該如何使用反引號來編寫該代碼? – Acey

+0

«'... ...'»檢查此鏈接https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals –

回答

0

有腳本幾個錯誤。

  • 結束腳本標記沒有正確關閉:</script應該是</script>
  • 函數Checks應該包含它下面的所有內容,否則當頁面加載時執行Checks下面的腳本部分。
  • 而不是測試exam1 == true,您需要測試checkexam1 == true,因爲這是您的變量被稱爲。使用嚴格的相等運算符是安全的:checkexam1 === true
  • 沒有開始<table>標籤。

下面是更正腳本:

$(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; i < 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 is the break schedule for exam1</td></tr>"; 
    } 
    if (checkexam2 === true) { 
    final_string += "<tr><td>STEP 1-2-3</td><td>this is the break schedule for exam2</td></tr>"; 
    } 
    if (checkexam3 === true) { 
    final_string += "<tr><td>PMI</td><td>this is the break schedule for exam3</td></tr>"; 
    } 

    final_string += "</table></html>"; 
    var new_page = window.open('', 'name'); 
    new_page.document.body.innerHTML = final_string; 
    new_page.document.close(); 
} 

查看工作演示:http://plnkr.co/LewFZ4uD4T3SOPNI6iPL

而且不要忘了失蹤>添加到結束腳本標籤!

Additionally, do you have any tips for improving my code in general?

由於您已經在使用jQuery,所以瞭解如何直接操作元素而不是創建HTML標記字符串將會非常有用。您可以通過jQuery Learning Center瞭解更多,尤其是Manipulating Elements的部分。