2016-11-05 7 views
0

私は一般的にコーディングするのがとても新しく、ある種のもので、シンプルなものと一緒に行った。従業員が作業合格/忘れを忘れて、その日の臨時休暇を必要とする場合、受付係/警備員は割り当てられたバッジ番号とともに従業員情報をフォームに入力することができるということです。このフォームから自動的にテーブルに入力されます。この表の中には、1日の終わりにパスの戻りを確認するチェックボックスがあります。私は、ユーザーがサブミット/セーブ(初心者プログラマー)に当たったときにユーザーが入力したデータを扱うダイナミックテーブルを作成したい

私には2つの問題があります。最初は、従業員の名前と生年月日(連絡先/住所などは表示されません)以外のデータは取得できません。もう一つは、どこかに間違ったキーを打つ必要があるということです。私がsaveを押すと、データ(名前とdobが含まれています)が表示されません。しかし、私はこのことに非常に新しい(これは私の最初のプロジェクトである)と言っていたので、私のコードを何度も見てきました。私は何を求めているのかよくわかりません。

もしあなたが何かガイダンスを提供できるなら、私は非常に感謝しています。

PS。色はそのままで、私はCSSで遊んでいるときに私が何を変えているかを簡単に見ることができます。最終版はもっと良く見えます(私は願っています)。コーディングの貧しい標準のため、再び私の謝罪:私はそれは全くの初心者の明らかな兆候だらけだと確信しています...

これは私のHTMLファイルです:

<html> 

    <head> 
    <title> 
     My Document 
    </title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 

    <script src="default.js"></script> 
    <link rel="stylesheet" href="style.css"> 

    </head> 

    <body onload="doShowAll()"> 
    <h1>Pass Manager</h1> 
    <div id="form" name="input" title="Input Form"> 
    <form > 
     Name: <input type="text" name="name" /> 
     </br> 
     Date of Birth: <input type="date" name="dob" /> 
     House Number: <input type="number" name="house_number" /> 
     Postcode: <input type="text" name="postcode" /> 
     Contact Number: <input type="number" name="contact_number" /> 
     Email: <input type="email" name="email" /> 
     </br> 
     Pass number: <input type="number" name="pass_number" /> 
    </form> 
    </div> 

    <form name=Information> 
    <div id="PlayArea"> 
    <table> 
     <tr> 

     <td><b>Name:</b> <input type="text" name="name"></td> 
     <td><b>Date of Birth:</b> <input type="text" name="dob"></td> 
     <td><b>House Number:</b> <input type="text" name="houseNumber"></td> 
     <td><b>Postcode:</b> <input type="text" name="postcode"></td> 
     <td><b>Contact Number:</b> <input type="number" name="contactNumber"></td> 
     <td><b>Email:</b> <input type="email" name="email" /></td> 
     <td><b>Pass Number:</b> <input type="number" name="passNumber"></td> 

     </tr> 

     <tr> 
     <td> 
      <input type=button value="Save" onclick="SaveItem()"> 
      <input type=button value="Modify" onclick="ModifyItem()"> 
      <input type=button value="Remove" onclick="RemoveItem()"> 
      </td> 
     </tr> 
    </table> 
    </div> 

    <div id="items_table"> 
    <h2>Loaned Badges</h2> 
    <table id=list></table> 
    <p> 
     <label><input type=button value="Clear" onclick="ClearAll()"> 
     <i>* Removes all items</i></label> 
    </p> 
    </div> 
</form> 

    </body> 

</html> 

そしてこれが私ですJavaScriptファイル:

function SaveItem() { 
       var name = document.forms.Information.name.value; 
       var data = document.forms.Information.data.value; 
       localStorage.setItem(name, data); 
       doShowAll(); 
      } 

function ModifyItem() { 
       var name = document.forms.Information.name.value; 
       document.forms.Information.data.value = localStorage.getItem(name); 
       doShowAll(); 
      } 
function RemoveItem() { 
       var name = document.forms.Information.name.value; 
       document.forms.Information.data.value = localStorage.removeItem(name); 
       doShowAll(); 
      } 
function ClearAll() { 
       localStorage.clear(); 
       doShowAll(); 
      } 
function CheckBrowser() { 
       if ('localStorage' in window && window['localStorage'] !== null) { 
        return true; 
       } 
       else { 
        return false; 
       } 
      } 
function doShowAll() { 
        if (CheckBrowser()) { 
        var key = ""; 
        var list = "<tr><th>Name</th><th>Date of Birth</th><th>House Number</th><th>Postcode</th><th>Contact Number</th><th>Email</th><th>Pass Number</th></tr>\n"; 
        var i = 0; 
for (i = 0; i <= localStorage.length - 1; i++) { 
          key = localStorage.key(i); 
          list += "<tr><td>" + key + "</td>\n<td>" 
          + localStorage.getItem(key) + "</td></tr>\n"; 
           } 
if (list == "<tr><th>Name</th><th>Date of Birth</th><th>House Number</th><th>Postcode</th><th>Contact Number</th><th>Email</th><th>Pass Number</th></tr>\n") { 
          list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; 
           } 
          document.getElementById('list').innerHTML = list; 
           } else { 
           alert('Cannot store user preferences as your browser do not support local storage'); 
           } 
          } 
for (i = 0; i <= localStorage.length - 1; i++) { 
         key = localStorage.key(i); 
         list += "<tr><td>" + key + "</td>\n<td>" 
         + localStorage.getItem(key) + "</td></tr>\n"; 
       } 
function CheckBrowser() { 
       if ('localStorage' in window && window['localStorage'] !== null) { 
        return true; 
       } else { 
         return false; 
       } 
       } 

答えて

0

あなたのページには2つのフォームがあります。 2つのフォームは似ているように見えます(理由は分かりません)。最初のコードには名前がないので、コードにアクセスすることはできません。

私はいくつかの種類のテンプレートシステム(角度のような)を見ることをお勧めします。

あなたがやっていることは間違っていない普通の古いjavascriptを使用していますが、動的にjavascriptを作成する方法は非常に推奨されていません。遅かれ早かれそれが必要になるため、現代のフレームワークでは良いテクニックを学ぶかもしれません。

0

問題はSaveItem()にあります。 データは情報のフィールドではありません。私はDOBにそれを変更した、あなたはあなたのコードの実施例を示すことができる場合には便利です

function SaveItem() { 
      var name = document.forms.Information.name.value; 
      // data isn't a member of the Information form. 
      // var data = document.forms.Information.data.value; 
      var data = document.forms.Information.dob.value; 
      localStorage.setItem(name, data); 
      doShowAll(); 
     } 

を動作するように思われます。私が見たい場合は、コードをここにコードを投げてきました。 Codepen example

関連する問題