Question

我对编码很新，并且认为最好的学习方法是制作某种类型的应用程序，然后使用简单的应用程序。前提是，如果员工丢失了工作准证/徽章，并且当天需要临时工作人员，则接待员/保安人员可以将员工信息及其指定的徽章编号输入表格中。从这种形式，它自动输入到表格中。在此表中，将有一个复选框，用于在当天结束时验证通行证的返回。

我有两个问题：首先是我无法获取除员工姓名和出生日期之外的任何数据（因此联系号码/地址等都没有显示），以便在我点击保存时显示。第二个是我必须在某个地方找到一个错误的密钥，因为当我点击保存时，现在没有显示数据（包括名称和dob）。我已经多次查看了我的代码，但是，正如我所说的那样，我对这一切都很陌生（这是我的第一个项目），而且我不确定我应该寻找什么。< / p>

如果你们能提供一些指导，我将非常感激。

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;
                }
              }

Answer 1

您的网页上有两个表单。这两种形式看起来很相似（不确定为什么）。第一个没有名称，因此您的代码无法访问它。

我建议您查看某种模板系统（如Angular）。

你在做什么使用普通的旧javascript，这没有错，但是你动态创建javascript的方式是一种非常被弃用的技术，因为现在有很多更好的方法可以做到这一点。你也可以在现代框架中学习好技术，因为迟早会需要它们。

Answer 2

您遇到的问题是在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。 Codepen example

我想创建一个动态表，其中包含用户在提交/保存（新手程序员）

2 个答案: