<!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>
This is the code of my website which I working on as my project. I want to build a simple chatroom based on localstorage and javascript as the usage of all server-side language is forbidden to use for this project (anyway i havent learnt that as well).
But all my code works fine except for the part which I implement it to retrieve stored chat history (done while clicking send button). Basically I think the sendChat function is working fine as I purposely retrieve the localStorage item stored within the function to append into the displaying div. But the part I was to use it to retrieve chat history stored upon loading the page is not functioning. Can someone identify and fix the error for me? Thanks.
PS. the currentUser is declared using sessionStorage on the other page but as I dont include it in this page so just leave it undefined while testing the program. Thanks. :)
As I suggested in the comment, the problem is when the script is executed, in your case since the script is in the header the for loop which adds the existing chat to the UI is executed well before the box element is added to the dom which results in the error.
Since you are using jQuery, one solution is to use dom ready handler and jQuery event handlers like
//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>Demo: Fiddle (Snippet won't have access to localStorage)