Переместить объявления 'var' в начало функции - ошибка Javascript - PullRequest
Новая
       64

Переместить объявления 'var' в начало функции - ошибка Javascript

0 голосов
/ 07 декабря 2018

Я следую руководству по созданию динамически обновляемых комментариев в форме.Руководство, за которым я следую, продолжает представлять ошибки, а недавно обнаруженное мной не позволяет мне их исправить.это говорит мне о том, что мне нужно переместить объявления 'var' в начало функции.Также нет определения '$'

Любая помощь приветствуется!

Вот мой JavaSript 

var comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (var i=0;i<comment.length;i++){
    var html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

Вот мой HTML 

<!DOCTYPE html>
<html>
    <head>
        <title> Reviews</title>
        <link href="css/Review.css" rel="stylesheet" type="text/css">
    </head>
<body>
    
    
    <div class='form'>
        <h3>Please write a review about your stay</h3>
    Name: <input type="text" id="name"/> <br> <br>
    Date: <input type="date" id="date"/> <br> <br>
    Comment: <textarea rows="7" col="30" id="bodyText"></textarea><br>
    <input type="button" id="addComment" value="Submit">  
    
    </div>

    <h2>Comments</h2>

    
    <div id='container'>
    
    
    </div>
    <a href="{{ url_for('Index.html', id='content') }}">Go to Homepage</a>
    
    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
    <script src="Review.jquery.js" type="text/javascript"></script>
</body>
</html>

1 Ответ

0 голосов
/ 07 декабря 2018

Линтер говорит вам, что вы должны объявить i и comment в тот же момент, когда интерпретатор видит, что объявлена ​​переменная, которая будет либо в верхней части самой внутренней функции,или если вы уже на верхнем уровне, на самом верху верхнего уровня.Например, для вашего кода: 

var i;
var comment;
var html;
comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (i=0;i<comment.length;i++){
    html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

Если вы этого не сделаете, вы можете запутаться из-за неинтуитивных проблем с подъемом var - вот для чего нужно правило линтинга.(Это не ошибка интерпретатора Javascript, это всего лишь ошибка, выдаваемая вашим линтером.)

Тем не менее, вы можете вместо этого использовать современный синтаксис с const и let, которые не являются поднял, и вы можете использовать методы массива вместо циклов for для более функционального и краткого кода, если хотите: 

const comment = [
  {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
  {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
  {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
comment.forEach(({ name, date, body }) => {
  const html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+name+"</span><div class='date'>"+.date+"</div><p>"+body+"</p></div><div class='clear'></div></div>"
  $('#container').append(html);
});

Вы также можете рассмотреть возможность использования современного линтера, такого как ESLint.JSLint довольно старый и не очень хорошо разбирается в хорошем синтаксисе, который позволяет нам современный JS.

...