2017-07-28 9 views
-1

私は仕事用コンピュータから実行するための簡単なWebページに取り組んでいます。大多数のWebサイトが私の仕事用コンピュータでブロックされているので、HTML + CSS + Javascriptの単純な組み合わせを使ってこの作業を達成できることを期待していました。テーブルWebページの簡単なフォームをHTMLで作成するにはどうすればよいですか?

ユーザーは、興味のある試験の複数のチェックボックスを選択してから、「シートを生成」ボタンをクリックすると、選択した試験のみのブレークスケジュールの表を表示する別のタブが開きます。

私はすでにコードの基本について作業を開始していますが、私は前進しないようにいくつかのエラーが発生し続けています。

Google Chromeのコンソールデバッガは私に次のエラーを与える:

  1. キャッチされないでSyntaxError:無効または予期しないトークン(forAcey.html:59)
  2. キャッチされないに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>&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/ja/docs/Web/JavaScript/Reference/Template_literals –

答えて

0

スクリプト内のいくつかのエラーがあります。

  • 終了スクリプトタグが正しく閉じられていない:</script</script>である必要があります。
  • 機能チェックは、その下のすべてを囲む必要があります。そうでない場合は、ページが読み込まれたときにチェックの下のスクリプトの部分が実行されます。
  • 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のセクションをご覧ください。

関連する問題