Im trying to display data saved in the local storage in an html table when clicking the display button. The data entered will be saved to local storage when submitted, however that data saved will not display in the table. Im unsure which part of my code is incorrect.
Heres the javascript:
var index = 0;
var announcement = [];
function rtdata() {
'use strict';
window.alert("Your announcement has been posted!");
announcement[index] = {
username : document.getElementById("username").value,
club : document.getElementById("club").value,
category : document.getElementById("category").value,
grade : document.getElementById("grade").value,
gender : document.getElementById("gender").value,
time : document.getElementById("Time").value,
moreinfo : document.getElementById("More Info").value
};
index = index + 1;
localStorage.setItem("A", JSON.stringify(announcement));
}
/*Sends data to display on the next page*/
function display() {
'use strict';
window.alert("Your announcement has been updated!");
var newObject = [];
var temp = localStorage.getItem("A");
newObject = JSON.parse(temp)
var data = "";
var category = $("#category").val();
for (var i=0; i<newObject.length; i++)
if (category==newObject.category||newObject.category2||newObject.category3) {
data+=newObject[i].description+"<br>";
}
var storage;
$("#load").html(data);
}
Here's the html:
pg1.
<body>
<h3>Name:</h3>
<input id="username" type="text" name="frame"><br>
<h3>Club:</h3>
<input id="club" type="text" name="frame"><br>
<h3>Category:</h3>
<select id="category">
<option value=""></option>
<option value="Sports">sports</option>
<option value="Technology">technology</option>
<option value="Arts and Culture">art</option>
<option value="Academics">academic</option>
<option value="World Issues">world issues</option>
<option value="Others">others</option>
</select>
<h3>Grade:</h3>
<select id="grade">
<option value=""></option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="All">All</option>
</select>
<h3>Gender:</h3>
<select id="gender">
<option value=""></option>
<option value="Male">male</option>
<option value="Female">female</option>
<option value="All">all</option>
</select>
<h3>Time:</h3>
<input id="Time" type="text" name="frame"><br>
<h3>More Info:</h3>
<textarea id="More Info" rows="2" cols="20" name='textarea1'>
</textarea>
<button onclick="resetForm(form)">Reset</button>
<button onclick="rtdata()">Submit</button>
<p id="A"></p>
</body>
pg2.
<button onclick="display()">Display</button>
<table>
<tr>
<th class="username">Name</th>
<th class="club">Club</th>
<th class="category">Category</th>
<th class="grade">Grade</th>
<th class="gender">Time</th>
<th class="Time">More Info</th>
<th class="More Info">More Info</th>
</tr>
</table>
</body>
Aucun commentaire:
Enregistrer un commentaire