私は仕事用コンピュータから実行するための簡単なWebページに取り組んでいます。大多数のWebサイトが私の仕事用コンピュータでブロックされているので、HTML + CSS + Javascriptの単純な組み合わせを使ってこの作業を達成できることを期待していました。テーブルWebページの簡単なフォームをHTMLで作成するにはどうすればよいですか?
ユーザーは、興味のある試験の複数のチェックボックスを選択してから、「シートを生成」ボタンをクリックすると、選択した試験のみのブレークスケジュールの表を表示する別のタブが開きます。
私はすでにコードの基本について作業を開始していますが、私は前進しないようにいくつかのエラーが発生し続けています。
Google Chromeのコンソールデバッガは私に次のエラーを与える:
- キャッチされないでSyntaxError:無効または予期しないトークン(forAcey.html:59)
- キャッチされないにReferenceError:小切手は、(HTMLButtonElement.onclickで が定義されていません。 forAcey.html:33)
[シートを生成]ボタンをクリックすると2番目のエラーが表示されます。
私の間違いがどこにあるのか、どのように修正するのを助けることができますか?
また、一般的にコードを改善するためのヒントはありますか?
下記のコードスニペットを添付しました。
<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> <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>
すぐに、私はあなたが複数行の文字列を持っていることがわかります。これはjavascriptでは許されません(真実ですが、バックティックを使用する必要があり、IEに互換性の問題があります)。 –
バックティックを使用してそれをどのように書きますか? – Acey
« '... ...»»このリンクをチェックしてくださいhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals –