Javascript 未捕获的语法错误：意外标记'；%'；，使用单独的js文件时发生烧瓶错误
我正在开发一个flask应用程序，当我试图在我的html页面中链接我的js文件时，我遇到了上面的错误 但是，当我在HTML文件本身的标记下包含js逻辑时，我看不到错误，页面按预期呈现 导致错误的方法 JS：存储在/static/JS/alv.JS中Javascript 未捕获的语法错误：意外标记'；%'；，使用单独的js文件时发生烧瓶错误,javascript,json,flask,Javascript,Json,Flask,我正在开发一个flask应用程序，当我试图在我的html页面中链接我的js文件时，我遇到了上面的错误 但是，当我在HTML文件本身的标记下包含js逻辑时，我看不到错误，页面按预期呈现 导致错误的方法 JS：存储在/static/JS/alv.JS中 var lineData1 = { labels : [ {% for item in mob %} //Error on this line Uncaught SyntaxError: Unexpected token '%' "{{ i
var lineData1 = {
labels : [
{% for item in mob %} //Error on this line Uncaught SyntaxError: Unexpected token '%'
"{{ item }}",
{% endfor %}
],
datasets : [{
fill: {
target: 'origin',
above: 'rgb(255, 0, 0)', // Area will be red above the origin
below: 'rgb(0, 0, 255)' // And blue below the origin
},
borderColor : "rgba(0,175,233)",
fillColor: "rgba(0,175,233)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
bezierCurve : true,
data : [
{% for item in apo %}
{{ item }},
{% endfor %}]
}
]
};
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;
steps = 5
/*Chart display options*/
var config1 = {
type : "line",
data : lineData1,
scaleOverride: false,
scaleSteps : 10,
scaleStepWidth : 4,
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: true,
options: {
title: {
display: true,
text: ['ATL_60K NoStress Blended','Attrition per Open(%)']
},
legend : { display : false },
responsive : true,
scales:{
xAxes:[{
display : true,
ticks: {
autoSkip: true,
maxTicksLimit: 20
},
scaleLabel: {
display : true,
labelString : 'MOB'
}
}],
yAxes:[{
display : true,
scaleLabel: {
display : true,
labelString : 'Attrition Rate'
}
}]
}
},
plugins: {
datalabels: {
display: false,
}
}
};
/* get chart canvas */
var attr_chart = document.getElementById("attr_line").getContext("2d");
/* draw charts */
var attr_line = new Chart(attr_chart,config1);
/* Load each chart and hide() the tab immediately. */
$('#tab1').hide();
$('#tab1_btn').on('click',function(){
$('#tab1').show();
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/nav-bar.css') }}">
</head>
<body>
<center>
<div class="navbar">
<a href="/">Home</a>
<a href="/alv">ALV</a>
<div class="dropdown">
<button class="dropbtn">ACE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Partner 1</a>
<a href="#">Partner 2</a>
<a href="#">Partner 3</a>
</div>
</div>
</div>
<center>
<h1>{{ title }}</h1>
<button id="tab1_btn">Attrition per Open</button>
<div id="tab_cover"> </div>
<div id="tabs">
<div id="tab1" class="tab">
<canvas id="attr_line" class="chart" width="400" height="300"></canvas>
</div>
</div>
<script src="{{url_for('static', filename='js/alv.js')}}"></script>
</center>
</body>
</html>
王牌
{{title}}
每次开放的损耗
谢谢出现此问题是因为您不能在不是由flask渲染的文件中使用Jinja模板，而该文件是静态文件。 在这个问题中，解释了在外部js中使用flask变量的几种方法。 问题解释
当您使用
{%}{{}render\u template（）