this is my whole thing I just want my comments to help Please.
<!DOCTYPE html>
<html>
<head>
<title>Forum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="pixel">
<br>
<br>
<div class="blackBox">
<p class="white">| <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/index.html">Home</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/textboxPhase.html">Textbox Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/breakoutPhase.html">Breakout Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/goatPhase.html">Goat Cage Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/forum.html">Forum</a> |</p>
</div><br>
<br>
<h1>Welcome to The "There is no Game" Forum</h1>
<div class="container">
<h2>Leave us a comment</h2>
<form>
<textarea id="" placeholder="Add Your Comment" value=" "></textarea>
<div class="btn">
<input id="submit" type="submit" value="Comment"> <button id="clear">Clear</button>
</div>
</form>
<div class="comments">
<h2>Comments</h2>
<div id="comment-box">
<ul>
<li>WELCOME</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
const field = document.querySelector('textarea');
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const comments = document.getElementById('comment-box');
// array to store the comments
const comments_arr = [];
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}<\/li>`;
})
list += '<\/ul>';
comments.innerHTML = list;
}
clear.onclick = function(event){
event.preventDefault();
// reset the array
comments_arr.length = 0;
// re-genrate the comment html list
display_comments();
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
</script><br>
<br>
<br>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</div>
</div>
</body>
</html
I know this code works but every time I reload it the comments disappear and I want it to save and all the code is too complex for my new code brain to understand. This is for my website and it's a basic wiki on how to beat there is no game, the old one. I need to turn this into my professor and wanted to add something extra but I want it so if I publish this the comment section isn't just a stupid gimmick.