Показать сообщение отдельно
  #1 (permalink)  
Старый 07.10.2020, 19:26
Новичок на форуме
Отправить личное сообщение для Navel_pini Посмотреть профиль Найти все сообщения от Navel_pini
 
Регистрация: 07.10.2020
Сообщений: 1

Не работает система коментариев
Здравствуйте, я столкнулся с проблемой создавая свой первый сайт. В нём есть только не рабочая система комментариев. Я бы хотел что-бы хоть она работала. Комментарии отправляются, но не отображаются другим пользователям, в этом и есть проблема, которую я не могу решить сам. Вот сам сайт http://walls-one.space/walls-one?
код html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
	<meta name="keywords" content="Стена, общение, разговор, walls, стены">
	<meta name="description" content="Стены, как ещё сказать, стена и всё">
    <link href="walls1.css" rel="stylesheet">
	<link rel="shortcut icon" href="/cfgn/walls1.png" type="image/png"> 
    <title>
    walls-one
    </title>
  </head>
  <body>
      <header>
      <h1>
        Стена 1, Общайтесь где и как удобно,и о чём угодно...
		<p>Сайт в разработке</p>
	  </h1>
	   <p>
	   <strong> Мы не несём какой либо ответственности за сказанное или написанное посетителями. Сайт предназначен только для общения.</strong>
	   </p>
      </header>
    <main>  
      <nav>
        <a href="#new">Новые сообщения</a>
      </nav>	
	    <section>
		<h2>начинай общение здесь:</h2>
        <div class="container">
            <div class="row">
			<aside>
			<align=left>
			<div id="message-field">
			</div>
			</align>
			</aside>
                        <form>
						<h2>
                                <div class="form-group">
                                 <label for="message-name">Имя:</label>
                                  <input type="name" class="form-control" id="message-name"  placeholder="Enter your name">
                                </div>
                                <div class="form-group">
                                  <p><label for="message-body">Сообщение:</label>
                                  <textarea type="password" class="form-control" id="message-body" placeholder="message"></textarea>
                                </div></p>
                                <p><div class="form-group form-check text-right">
                                        <button type="submit" id="message-add" class="btn btn-primary">Отправить</button>
                                </div></p>
						</h2>
                        </form>
            </div>
        </div>
         <script src="jss.js"></script>
    </main>
    <footer>
	<p id="new">Пока что всё.</p>
    <p><strong> Мы не несём какой либо ответственности за сказанное или написанное посетителями. Сайт предназначен только для общения.</strong></p>
    </footer>
  </body>
</html>

Код JS
let messages = [];
loadMessages();

document.getElementById('message-add').onclick = function(){
    let messageName = document.getElementById('message-name');
    let messageBody = document.getElementById('message-body');

    let message = {
        name : messageName.value,
        body : messageBody.value,
        time : Math.floor(Date.now() / 1000)
    }

    messageName.value = '';
    messageBody.value = '';

    messages.push(message);
    saveMessages();
    showMessages();
}

function saveMessages(){
    localStorage.setItem('messages', JSON.stringify(messages));
}

function loadMessages(){
    if (localStorage.getItem('messages')) messages = JSON.parse(localStorage.getItem('messages'));
    showMessages();
}

function showMessages (){
    let messageField = document.getElementById('message-field');
    let out = '';
    messages.forEach(function(item){
        out += `<p class="text-right small"><em>${timeConverter(item.time)}</em></p>`;
        out += `<p class="alert alert-primary" role="alert"><h4>"${item.name}"</h4> напечатал:</p>`;
        out += `<p class="alert alert-success" role="alert"><h5>${item.body}</h5></p>`;
    });
    messageField.innerHTML = out;
}
function clearStorage () {
	localStorage.clear();
}
function timeConverter(UNIX_timestamp){
    var a = new Date(UNIX_timestamp * 1000);
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var year = a.getFullYear();
    var month = months[a.getMonth()];
    var date = a.getDate();
    var hour = a.getHours();
    var min = a.getMinutes();
    var sec = a.getSeconds();
    var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
    return time;
  }

Код CSS вряд ли отосится к этой проблеме.
Заранее спасибо.
Ответить с цитированием