javascript 的一些错误我什至无法识别错误

Question

<!DOCTYPE HTML>

<html>
    <head>
        <title>1</title>
        <meta charset="utf-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var chatCount, nBuffer, tBuffer, cBuffer;
            nBuffer = [""];
            tBuffer = [""];
            cBuffer = [""];
            nHBuffer = [""];
            tHBuffer = [""];
            cHBuffer = [""];

            if(localStorage.chatCount == undefined){
                localStorage.chatCount = 0;
                chatCount = localStorage.chatCount;
            }else{
                chatCount = localStorage.chatCount;
            }
            //start of the part malfunctioning
            for(i=1;i<=chatCount;i++){
                nHBuffer[i] = document.createElement('p');
                tHBuffer[i] = document.createElement('p');
                cHBuffer[i] = document.createElement('p');

                nHBuffer[i].className = "chatUser";
                tHBuffer[i].className = "chatTime";
                cHBuffer[i].className = "chatContent";

                nHBuffer[i].innerHTML = localStorage.getItem("cUser"+i);
                tHBuffer[i].innerHTML = localStorage.getItem("cTime"+i);
                cHBuffer[i].innerHTML = localStorage.getItem("cContent"+i);

                document.getElementById("box").appendChild(nHBuffer[i]);
                document.getElementById("box").appendChild(tHBuffer[i]);
                document.getElementById("box").appendChild(cHBuffer[i]);
                document.getElementById("box").appendChild(document.createElement("br"));
            }
            //end of part malfunctioning
            var currentCount = chatCount+1;

            function sendChat(){
                var cUser = sessionStorage.currentUser;
                var cTime = new Date();
                cTime = cTime.toLocaleString();
                var cContent = document.getElementById("chatField").value;
                document.getElementById("chatField").value = "";

                localStorage.setItem("cUser"+currentCount,cUser);
                localStorage.setItem("cTime"+currentCount,cTime);
                localStorage.setItem("cContent"+currentCount,cContent);

                nBuffer[currentCount] = document.createElement('p');
                tBuffer[currentCount] = document.createElement('p');
                cBuffer[currentCount] = document.createElement('p');

                nBuffer[currentCount].className = "chatUser";
                tBuffer[currentCount].className = "chatTime";
                cBuffer[currentCount].className = "chatContent";

                nBuffer[currentCount].innerHTML = localStorage.getItem("cUser"+currentCount);
                tBuffer[currentCount].innerHTML = localStorage.getItem("cTime"+currentCount);
                cBuffer[currentCount].innerHTML = localStorage.getItem("cContent"+currentCount);

                document.getElementById("box").appendChild(nBuffer[currentCount]);
                document.getElementById("box").appendChild(tBuffer[currentCount]);
                document.getElementById("box").appendChild(cBuffer[currentCount]);

                document.getElementById("box").appendChild(document.createElement("br"));
                chatCount++;
                localStorage.chatCount = chatCount;
                currentCount++;


            }

            function clearLS(){
                localStorage.clear();
            }

            //JQuery division

            $(document).ready(function(){

            });
        </script>

        <style>
            .wrapper{
                border:2px black solid;
                padding: 40px;
                width: 60%;
                background-color: #F7F7F7;
                margin: 0 auto 10px;
                border-radius: 2px;
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
                overflow: hidden;
            }

            body{
                position:absolute;
                left:0px;
                right:0px;
            }

            .title{
                font-family:sans serif;
                font-weight: 100;
                text-align: center;
                font-size: 2.3em;
            }

            .usubmit {
                width: 10%;
                display: block;
                margin-bottom: 10px;
                position: relative;
                height:width;
                border: 0px;
                color: #fff;
                text-shadow: 0 1px rgba(0,0,0,0.1); 
                background-color: #4d90fe;
                height:44px;
                font-size:1.5em;
            }

            .usubmit:hover{
                border: 0px;
                text-shadow: 0 1px rgba(0,0,0,0.3);
                background-color: #357ae8;
            }

            #chatField, #box{
                height: 44px;
                font-size: 16px;
                width: 90%;
                margin-bottom: 10px;
                -webkit-appearance: none;
                background: #fff;
                border: 1px solid #d9d9d9;
                border-top: 1px solid #c0c0c0;
                /* border-radius: 2px; */
                padding: 0 8px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }

            #chatField{
                width:80%;
            }

            #chatField:hover{
                border: 1px solid #b9b9b9;
                border-top: 1px solid #a0a0a0;
                -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
                -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            }

            #box, #chatField, .usubmit{
                float:left;
            }

            #box{
                clear:both;
                height:700px;
                overflow:scroll;
            }

            p{
                padding: 5px;
                margin: 0px;
            }

            .chatUser{
                font-weight: bold;
                font-family:sans serif;
                font-size:1.2em;
            }

            .chatTime{
                color: gray;
                font-family:sans serif;
            }

            .chatContent{
                font-family:sans serif;
            }
        </style>

    </head>

    <body>
        <div class="wrapper">
            <h1 class="title">ChatRoom</h1>
            <div class="chatBox" id="box">

            </div>

            <input type="textfield" id="chatField" class="" />

            <input type="button" value="SEND" id="" class="usubmit" onclick="sendChat();" />
            <input type="button" value="SEN" id="" class="usubmit" onclick="clearLS();" />
        </div>
    </body>
</html>

这是我作为我的项目工作的网站的代码。我想基于localstorage和javascript建立一个简单的聊天室，因为这个项目禁止使用所有服务器端语言（反正我也没学过）。

但是我的所有代码都工作正常，除了我实现它以检索存储的聊天历史记录的部分（在单击发送按钮时完成）。基本上我认为 sendChat 函数工作正常，因为我有意检索存储在函数中的 localStorage 项目以附加到显示 div。但是我用它来检索加载页面时存储的聊天记录的部分不起作用。有人可以为我识别并修复错误吗？谢谢

PS。 currentUser 是在另一页上使用 sessionStorage 声明的，但由于我没有将其包含在此页中，因此在测试程序时将其保留为未定义状态。谢谢。 :)

Answer 1

正如我在评论中所建议的那样，问题是在执行脚本时，在你的情况下，因为脚本在 header for 循环中，它将现有的聊天添加到 UI在将 box 元素添加到导致错误的 dom 之前执行得很好。

由于您使用的是 jQuery，一种解决方案是使用 dom 就绪处理程序和 jQuery 事件处理程序，例如

//JQuery division
$(document).ready(function() {
  var currentCount, chatCount;

  function addChat(user, time, content) {
    addPara(user, 'chatUser', '#box');
    addPara(time, 'chatTime', '#box');
    addPara(content, 'chatContent', '#box');
  }

  function addPara(content, clazz, container) {
    $('<p />', {
      html: content,
      'class': clazz
    }).appendTo(container);
  }

  function sendChat() {
    var cUser = sessionStorage.currentUser;
    var cTime = new Date();
    cTime = cTime.toLocaleString();
    var cContent = $("#chatField").val();
    $("#chatField").val('');

    localStorage.setItem("cUser" + currentCount, cUser);
    localStorage.setItem("cTime" + currentCount, cTime);
    localStorage.setItem("cContent" + currentCount, cContent);

    addChat(cUser, cTime, cContent);

    $("#box").append('<br />');
    chatCount++;
    localStorage.chatCount = chatCount;
    currentCount++;


  }

  function clearLS() {
    localStorage.clear();
  }


  if (localStorage.chatCount == undefined) {
    localStorage.chatCount = 0;
    chatCount = +localStorage.chatCount;
  } else {
    chatCount = +localStorage.chatCount;
  }
  //start of the part malfunctioning
  for (i = 1; i <= chatCount; i++) {
    addChat(localStorage.getItem("cUser" + i), localStorage.getItem("cTime" + i), localStorage.getItem("cContent" + i));
  }
  //end of part malfunctioning
  currentCount = chatCount + 1;

  $('#sendChat').click(sendChat)
  $('#clearLS').click(clearLS)

});

.wrapper {
  border: 2px black solid;
  padding: 40px;
  width: 60%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
body {
  position: absolute;
  left: 0px;
  right: 0px;
}
.title {
  font-family: sans serif;
  font-weight: 100;
  text-align: center;
  font-size: 2.3em;
}
.usubmit {
  width: 10%;
  display: block;
  margin-bottom: 10px;
  position: relative;
  height: width;
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  background-color: #4d90fe;
  height: 44px;
  font-size: 1.5em;
}
.usubmit:hover {
  border: 0px;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background-color: #357ae8;
}
#chatField,
#box {
  height: 44px;
  font-size: 16px;
  width: 90%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#chatField {
  width: 80%;
}
#chatField:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#box,
#chatField,
.usubmit {
  float: left;
}
#box {
  clear: both;
  height: 700px;
  overflow: scroll;
}
p {
  padding: 5px;
  margin: 0px;
}
.chatUser {
  font-weight: bold;
  font-family: sans serif;
  font-size: 1.2em;
}
.chatTime {
  color: gray;
  font-family: sans serif;
}
.chatContent {
  font-family: sans serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="title">ChatRoom</h1>

  <div class="chatBox" id="box"></div>
  <input type="textfield" id="chatField" class="" />
  <input type="button" value="SEND" id="sendChat" class="usubmit" />
  <input type="button" value="SEN" id="clearLS" class="usubmit" />
</div>

演示：Fiddle（_{代码段无法访问 localStorage}）

javascript 的一些错误我什至无法识别错误

some bugs of javascript i cant even identify the error

javascript

jquery

appendchild

session-storage

local-storage