Question

我正在跟踪有关如何在表单中创建动态更新注释的教程。我正在遵循的指南不断出现错误，而我最近发现的指南并没有让我对其进行修复。它告诉我需要将“ 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>

Answer 1

lint告诉您，应在解释器看到声明了变量的同一点声明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解释器错误，仅是您的linter抛出的错误。）

也就是说，您可以考虑使用const和let而不是悬挂的现代语法，并且可以使用数组方法代替{{1 }}循环以获取更多功能和简洁的代码，如果您愿意的话：

for

您还可以考虑使用像ESLint这样的现代皮棉机。 JSLint很老，对现代JS允许我们使用的漂亮语法几乎不了解。

将'var'声明移至函数顶部-Javascript错误

1 个答案: