I am trying to do a webpage in which the user types some text into a text field and this text is shown below. I managed to display the text that the user types by adding this text into an array every time they click de submit button. I want this "comments" written by the user to the displayed every time someone loads the webpage, regardless of who typed the comment. So it would be kind of like a guestbook. What I tried to do so far is to save the array in an external file and then load this file when the page reloads. The problem is that I haven't find a way to do this when searching in stackoverflow and google. Do you have any suggestions on how I can do this?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/reset.css" type="text/css" rel="stylesheet">
<link href="css/style1.css" type="text/css" rel="stylesheet">
<title>Speak your mind</title>
</head>
<body>
<div id="header"><h1>Speak Your Mind</h1></div>
<div id ="description"><h2>Share with the world whatever is in your mind right now! </h2></div>
<div id="writeText"><textarea rows="4" cols="50" id="writeThought"></textarea></div>
<div id="submitThoughtContainer"><button id="submitYourThought">Submit Your Thought! </button></div>
<div id="thoughtsContainer"></div>
<script src="js/script.js"></script>
</body>
</html>
Javascript:
var thoughts = [];
window.addEventListener('load', function() {
var writeThought = document.getElementById('writeThought');
var recentThought;
var thoughtsContainer = document.getElementById('thoughtsContainer');
var submitYourThought = document.getElementById('submitYourThought');
var thoughtsTemporal = "";
submitYourThought.addEventListener('click', function() {
recentThought = writeThought.value;
thoughts.splice(0, 0, recentThought);
writeThought.value = "";
thoughtsTemporal = "";
for(var i = 0; i < thoughts.length; i++) {
thoughtsTemporal += '<div class="thoughts">'+ thoughts[i] +'</div>';
thoughtsContainer.innerHTML = "" + thoughtsTemporal;
}
});
});
