Javascript函数无法在简单的html表单

时间：2018-03-19 20:42:38

标签： javascript jquery html

这个html＆＃34;应用程序的目标＆＃34;是运行一个简单的表单，能够保存输入到文本框中的信息。 ＆＃34;信息＆＃34;然后保存的文本框上方会显示一个时间戳。

虽然html在Android的模拟器上以及在谷歌浏览器上运行良好，而且.css文件也可以正常运行，但javascript无法正常工作。我已经包含了html索引代码，以及我必须编辑的javascript文件。我没有包含的其他文件是我必须从学校下载的演示文件，因为我不希望编辑那些，我认为问题必须在我在这里包含的javascript文件中的某处。

具体来说，我必须为＆＃34添加点击按钮功能;添加＆＃34;和＆＃34;清除＆＃34;。我想你们真正做的唯一事情就是查看我所拥有的代码，看看你是否注意到任何明显的语法错误或者我可以修复的那种性质，但我已经多次检查了代码并且我没有看到任何错误

编辑：现在可以使用我发布的原始代码了。由于某些我不知道的原因，我尝试在不同的计算机上运行我的代码，它现在完全按照预期运行。起初我认为它是一台不同的计算机使它无法正常工作，但经过几次测试后，似乎代码根本没有足够的时间加载（10-15秒就可以了）。我点击按钮，然后像10次尝试一样，内容最终加载，就像它应该的那样。谢谢所有帮助过我的人＃34;修复＆＃34;这个。我最初想知道我的jquery版本是不是问题，因为它是一个较旧的版本。但它似乎很好。

＆＃13;
＆＃13; 
$(document).ready(function() {
  // read the data from local storage for the items
  var items = PROWEBAPPS.Storage.get("listitems");
  var loadTicks = new Date().getTime();

  function displayItems() {
    loadTicks = new Date().getTime();

    $("#items li[class!='header']").remove();
    if (items) {
      // create list items to display the current items
      for (var ii = 0; ii < items.length; ii++) {
        var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
        $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
      } // for
    } else {
      $("#items").append("<li>No items</li>");

      // initialise the items array
      items = [];
    } // if..else
  } // displayItems


  $("#add").click(function() {
    items.push({
      title: $("#newtitle").val(),
      created: new Date().getTime()
    });

    // save the items
    PROWEBAPPS.Storage.set("listitems", items);
    displayItems();
  });

  $("#clear").click(function() {
    items = null;
    PROWEBAPPS.Storage.remove("listitems");
    displayItems();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Web Storage Tester</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <link rel="stylesheet" media="screen" href="css/snippets.css" />
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript" src="js/prowebapps.js"></script>
  <script type="text/javascript" src="webstorage-test.js"></script>
</head>

<body>
  <h1 class="fancy">&lt;Christopher Hughes&gt; Web Storage JSON Wrapper</h1>
  <ul id="items">
    <li class="header">Items in Storage (tap to remove)</li>
  </ul>
  <ul id="newitem">
    <li class="header">New Item</li>
    <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
  </ul>
  <ul id="actions">
    <li><button id="add">Add</button></li>
    <li><button id="clear">Clear</button></li>
  </ul>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我注释掉除了用于存储给定代码和jquery cdn的脚本链接之外的所有脚本链接。 我将所有脚本标记移动到正文的底部，并在html文件中以正确的顺序移动。 像这样...

＆＃13;
＆＃13; 
<html>

<head>
  <title>Web Storage Tester</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <!-- <link rel="stylesheet" media="screen" href="css/snippets.css" /> -->
</head>

<body>
  <h1 class="fancy">&lt;Christopher Hughes&gt; Web Storage JSON Wrapper</h1>
  <ul id="items">
    <li class="header">Items in Storage (tap to remove)</li>
  </ul>
  <ul id="newitem">
    <li class="header">New Item</li>
    <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
  </ul>
  <ul id="actions">
    <li><button id="add">Add</button></li>
    <li><button id="clear">Clear</button></li>
  </ul>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript" src="js/prowebapps.js"></script> -->
  <script type="text/javascript" src="./index.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

在注释掉你的存储变量/代码并将空数组变量移动到全局范围后，在if / else语句中没有作用域，它似乎工作正常。

＆＃13;
＆＃13; 
$(document).ready(function() {
  // read the data from local storage for the items
  // var items = PROWEBAPPS.Storage.get("listitems");
  var loadTicks = new Date().getTime();
  var items = [];
  function displayItems() {
    loadTicks = new Date().getTime();

    $("#items li[class!='header']").remove();
    if (items) {
      // create list items to display the current items
      for (var ii = 0; ii < items.length; ii++) {
        var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
        $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
      } // for
    } else {
      $("#items").append("<li>No items</li>");

      // initialise the items array
 
    } // if..else
  } // displayItems


  $("#add").click(function() {
    items.push({
      title: $("#newtitle").val(),
      created: new Date().getTime()
    });

    // save the items
    //PROWEBAPPS.Storage.set("listitems", items);
    displayItems();
  });

  $("#clear").click(function() {
    items = null;
    PROWEBAPPS.Storage.remove("listitems");
    displayItems();
  });
});
＆＃13;
＆＃13;
＆＃13;

希望这有帮助

答案 1 :(得分：0)

我假装你的localStorage（PROWEBAPPS），一切似乎按预期工作。请修改你的问题。

见解决方案：

$(document).ready(function() {

  // -- Fake Local Storage --
  PROWEBAPPS = {
    Storage: {
      get: function(name){ return this[name] || (this[name]=[]) },
      set: function(name,items){this[items] = items },
      remove: function(name,){ this[items] = [] }
    }
  };
  
  // read the data from local storage for the items
  var items = PROWEBAPPS.Storage.get("listitems");
  var loadTicks = new Date().getTime();

  function displayItems() {
    loadTicks = new Date().getTime();

    $("#items li[class!='header']").remove();
    if (items) {
      // create list items to display the current items
      for (var ii = 0; ii < items.length; ii++) {
        var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
        $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
      } // for
    } else {
      $("#items").append("<li>No items</li>");

      // initialise the items array
      items = [];
    } // if..else
  } // displayItems


  $("#add").click(function() {
    items.push({
      title: $("#newtitle").val(),
      created: new Date().getTime()
    });

    // save the items
    PROWEBAPPS.Storage.set("listitems", items);
    displayItems();
  });

  $("#clear").click(function() {
    items = null;
    PROWEBAPPS.Storage.remove("listitems");
    displayItems();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Web Storage Tester</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <link rel="stylesheet" media="screen" href="css/snippets.css" />
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript" src="js/prowebapps.js"></script>
  <script type="text/javascript" src="webstorage-test.js"></script>
</head>

<body>
  <h1 class="fancy">&lt;Christopher Hughes&gt; Web Storage JSON Wrapper</h1>
  <ul id="items">
    <li class="header">Items in Storage (tap to remove)</li>
  </ul>
  <ul id="newitem">
    <li class="header">New Item</li>
    <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
  </ul>
  <ul id="actions">
    <li><button id="add">Add</button></li>
    <li><button id="clear">Clear</button></li>
  </ul>
</body>

</html>

相关问题
最新问题