Что не так я не понимаю в чем ошибка Uncaught TypeError: Cannot set property 'innerHTML' of null [закрыт]

197

18 марта 2022, 19:20

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 2 года назад.

Улучшить вопрос

let comments = [];
document.getElementById('comment-add').onclick= function() {
    event.preventDefault();
    let commentName = document.getElementById('comment-name');
    let commentBody = document.getElementById('comment-body');
    let comment = {
        name : commentName.value,
        body : commentBody.value,
        time : Math.floor(Date.now()/1000)
    } 
    commentName.value= "";
    commentBody.value= "";
    comments.push(comment);
    console.log(comment)
    saveComments();
    showComents();
}
function saveComments(){
     localStorage.setItem("comments", JSON.stringify(comments));
}
function showComents(){
 let commentField = document.getElementById('comment-field')
 let out="";
 comments.forEach(function(item){
     out += '<p class="text-right small"><em>${timeConverter(item.time)}</em></p>';
     out += '<p class="alert alert-primary" role="alert">${item.name}</p>';
     out += '<p class="alert alert-success" role="alert">${item.body}</p>';
 })
 commentField.innerHTML=out;
}
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 hour = a. getHours ();
    var min = a. getMinutes ();
    var sec = a. getSeconds ();
    var time = date + '' + month + '' + year + '' + hour + ':' + min + ':' + sec;
    return time;
  }

Answer 1

Это значит на странице нет элемента с id comment-field.

Видимо вот тут проблема возникает.

let commentField = document.getElementById('comment-field');
/* ... */
commentField.innerHTML=out;

Проверьте что у вас есть такой div на странице или приложите HTML код к вопросу.

Answer 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title></title>
</head>
<body>
<div class="conteiner">
    <div class="riv">
        <div class="col-lg-12">
            <h2 class="text-center">Comments</h2>
        </div>
            <div class="col-lg-6">
                <div class="comment-field"></div>
            </div>  
             <div class="col-lg-6">
                <form>
                    <div class="form-group">
                        <label for="comment-name">Name:</label>
                        <input type="name" class="form-control" id="comment-name" placeholder="Your name">
                    </div>
                    <div class="form-group">
                        <label for="comment-body">Comment:</label>
                        <input type="name" class="form-control" id="comment-body" placeholder="Your comments">
                    </div>
                        <div class="form-group text-right">
                            <button type="submit" id="comment-add" class="btn btn-primary"> add coment</button>
                        </div>
                    </div>
                </form>
            </div>     
     </div>
</div>
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="arsenii.js"></script>
</body>
</html>