烧瓶应用程序中的 HTML 脚本标签中的代码会抛出一些烦人的小错误首页

问题描述 投票:0回答:1

Home.html 文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{url_for("static",filename="css/css.css")}}">
</head>
<body>
<h1>Welcome to recipe book</h1>
<p>{{length}}</p>
<script>
const amount = "{{length}}";
let list = {{images | tojson}};
const base_URL = "{{ url_for('static',filename='images') }}"; 
const altText = {0:"Breakfast",1:"Lunch",2:"Dinner",3:"Snacks"};
for(let count=0;count<amount;count++){
    let current_image = document.createElement('img');
    let Cur_URL = base_URL + "/" + list[count];
    console.log(Cur_URL);
    current_image.setAttribute("src",Cur_URL);
    current_image.setAttribute('alt',altText[count]);
    current_image.setAttribute('height','200');
    current_image.setAttribute('width','auto');
    document.body.appendChild(current_image);
}   
</script>
</body>

</html>

main.py Flask python 文件:

#,redirect,url_for,send_from_directory,
from flask import Flask,render_template
import os
app = Flask(__name__)
@app.route("/")
def home():
    parent  = r"C:\Users\khait\Desktop\Website\Recipe_Book\static\images"
    everything = os.listdir(parent)
    images = []
    for i in everything:
        if os.path.isfile(os.path.join(parent,i)):
            images.append(os.path.join(i))
    length = len(images)
    return render_template("Home.html",images=images,length=length)

if __name__ == "__main__":
    app.run(debug=True)`

我只是想在我的html中使用长度变量。它会抛出与此行相关的错误:“const amount = {{length}};”和这一行“console.log(amount);”:

错误1: 预期属性分配.javascript

错误2: 预期声明或声明.javascript

我知道对此有很多类似的问题,我也问了一个关于长度变量的类似问题。但这是一个数字烧瓶变量,这是一个列表烧瓶变量。我浏览了它们,但找不到我的问题的答案。我也有兴趣知道布尔、字符和字符串变量的正确语法是什么。我假设字典变量与列表变量具有相同的逻辑。正确的? 任何帮助将不胜感激。

javascript python html flask
1个回答
0
投票

第一个错误是因为当您使用 const amount = "{{length}}"; 时java 脚本将其解释为声明,但不将

"
识别为有效的 Java 脚本语法。 第二个错误是指由于 `{{length}} 未被识别为有效的 Java 脚本表达式,因此它需要声明或语句。

要纠正它,您需要从

"
中删除
{{length}}
,这会直接将
length
的值分配给
amount
并使其对JS有效。这适用于所有格式,甚至是 JSON。

© www.soinside.com 2019 - 2024. All rights reserved.