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
我知道对此有很多类似的问题,我也问了一个关于长度变量的类似问题。但这是一个数字烧瓶变量,这是一个列表烧瓶变量。我浏览了它们,但找不到我的问题的答案。我也有兴趣知道布尔、字符和字符串变量的正确语法是什么。我假设字典变量与列表变量具有相同的逻辑。正确的? 任何帮助将不胜感激。
第一个错误是因为当您使用 const amount = "{{length}}"; 时java 脚本将其解释为声明,但不将
"
识别为有效的 Java 脚本语法。
第二个错误是指由于 `{{length}} 未被识别为有效的 Java 脚本表达式,因此它需要声明或语句。
要纠正它,您需要从
"
中删除{{length}}
,这会直接将length
的值分配给amount
并使其对JS有效。这适用于所有格式,甚至是 JSON。