我有这个html文件（本地为.html，服务器为.php）和相应的js代码。当我开发时，它在本地计算机上运行良好。我将其上传到服务器后，它就无法以相同的方式运行。具体来说，只有jquery函数有效，而onclick函数无效（根据我的调试报告）。
此外，当我在Ubuntu上本地运行文件时，它运行正常，但无法在Windows计算机上本地运行。
上面的更多内容，最终我发现它适用于Forefox，但不适用于Chrome。因此与操作系统无关。
实时网络上的控制台错误
Mixed Content: The page at 'stayondiscount.com/dynamicprice/nodal.php' was loaded over HTTPS, but requested an insecure favicon 'stayondiscount.com/favicon.ico'. This request has been blocked; the content must be served over HTTPS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="nodal.js"></script>
<title>Revenue Management System for Hotels</title>
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<select class="form-control">
<option>Choose City</option>
<option value="gurgaon" onclick="openCity(event, 'Gurgaon')">Gurgaon</option>
<option value="delhi" onclick="openCity(event, 'Delhi')">Delhi</option>
<option value="noida" onclick="openCity(event, 'Noida')">Noida</option>
<option value="jaipur" onclick="openCity(event, 'Jaipur')">Jaipur</option>
<option value="kolkata" onclick="openCity(event, 'Kolkata')">Kolkata</option>
<option value="bangalore" onclick="openCity(event, 'Bangalore')">Bangalore</option>
<option value="chennai" onclick="openCity(event, 'Chennai')">Chennai</option>
<option value="pune" onclick="openCity(event, 'Pune')">Pune</option>
<option value="mumbai" onclick="openCity(event, 'Mumbai')">Mumbai</option>
<option value="goa" onclick="openCity(event, 'Goa')">Goa</option>
</select>
</div>
<div class="gurgaon box">
<div class="row">
<div class="col-sm-6" id="chart1" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile1" style="height: 500px;"></div>
</div>
</div>
<div class="delhi box">
<div class="row">
<div class="col-sm-6" id="chart2" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile2" style="height: 500px;"></div>
</div>
</div>
<div class="noida box">
<div class="row">
<div class="col-sm-6" id="chart3" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile3" style="height: 500px;"></div>
</div>
</div>
<div class="jaipur box">
<div class="row">
<div class="col-sm-6" id="chart4" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile4" style="height: 500px;"></div>
</div>
</div>
<div class="kolkata box">
<div class="row">
<div class="col-sm-6" id="chart5" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile5" style="height: 500px;"></div>
</div>
</div>
<div class="bangalore box">
<div class="row">
<div class="col-sm-6" id="chart6" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile6" style="height: 500px;"></div>
</div>
</div>
<div class="chennai box">
<div class="row">
<div class="col-sm-6" id="chart7" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile7" style="height: 500px;"></div>
</div>
</div>
<div class="pune box">
<div class="row">
<div class="col-sm-6" id="chart8" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile8" style="height: 500px;"></div>
</div>
</div>
<div class="mumbai box">
<div class="row">
<div class="col-sm-6" id="chart9" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile9" style="height: 500px;"></div>
</div>
</div>
<div class="goa box">
<div class="row">
<div class="col-sm-6" id="chart10" style="height: 500px;"></div>
<hr>
<div class="col-sm-6" id="percentile10" style="height: 500px;"></div>
</div>
</div>
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
--------这是js文件----------------------------
var bangalore = [];
var bangalore_avg = [];
var bangalore_tenth_percentile = [];
var bangalore_nintyth_percentile = [];
var chennai = [];
var chennai_avg = [];
var chennai_tenth_percentile = [];
var chennai_nintyth_percentile = [];
var pune = [];
var pune_avg = [];
var pune_tenth_percentile = [];
var pune_nintyth_percentile = [];
var mumbai = [];
var mumbai_avg = [];
var mumbai_tenth_percentile = [];
var mumbai_nintyth_percentile = [];
var goa = [];
var goa_avg = [];
var goa_tenth_percentile = [];
var goa_nintyth_percentile = [];
var kolkata = [];
var kolkata_avg = [];
var kolkata_tenth_percentile = [];
var kolkata_nintyth_percentile = [];
var jaipur = [];
var jaipur_avg = [];
var jaipur_tenth_percentile = [];
var jaipur_nintyth_percentile = [];
var noida = [];
var noida_avg = [];
var noida_tenth_percentile = [];
var noida_nintyth_percentile = [];
var delhi = [];
var delhi_avg = [];
var delhi_tenth_percentile = [];
var delhi_nintyth_percentile = [];
var gurgaon = [];
var gurgaon_avg = [];
var gurgaon_tenth_percentile = [];
var gurgaon_nintyth_percentile = [];
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
}
else{
$(".box").hide();
}
});
}).change();
});
function openCity(evt, cityName) {
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://api.nodal.direct/v1/index.php/Api/getNodalGraph";
xhr.open(method, url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var api_data = xhr.responseText;
var api_json = JSON.parse(api_data);
var data = api_json["data"];
for(var i=0; i<data.length; i++) {
iter_data = data[i];
data_region = iter_data["region"];
data_median = iter_data["median_price"];
data_avg = iter_data["avg_price"];
data_date = iter_data["date"];
data_tenth_percentile = iter_data["tenth_percentile"];
data_nintyth_percentile = iter_data["ninty_percentile"];
var datearray = data_date.split("-");
var newdate = datearray[0] + ', ' + datearray[1] + ', ' + datearray[2];
if(data_region == "gurgaon") {
gurgaon.push({x:new Date(newdate), y:Number(data_median)});
gurgaon_avg.push({x:new Date(newdate), y:Number(data_avg)});
gurgaon_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
gurgaon_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "delhi") {
delhi.push({x:new Date(newdate), y:Number(data_median)});
delhi_avg.push({x:new Date(newdate), y:Number(data_avg)});
delhi_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
delhi_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "noida") {
noida.push({x:new Date(newdate), y:Number(data_median)});
noida_avg.push({x:new Date(newdate), y:Number(data_avg)});
noida_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
noida_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "jaipur") {
jaipur.push({x:new Date(newdate), y:Number(data_median)});
jaipur_avg.push({x:new Date(newdate), y:Number(data_avg)});
jaipur_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
jaipur_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "kolkata") {
kolkata.push({x:new Date(newdate), y:Number(data_median)});
kolkata_avg.push({x:new Date(newdate), y:Number(data_avg)});
kolkata_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
kolkata_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "bangalore") {
bangalore.push({x:new Date(newdate), y:Number(data_median)});
bangalore_avg.push({x:new Date(newdate), y:Number(data_avg)});
bangalore_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
bangalore_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "chennai") {
chennai.push({x:new Date(newdate), y:Number(data_median)});
chennai_avg.push({x:new Date(newdate), y:Number(data_avg)});
chennai_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
chennai_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "pune") {
pune.push({x:new Date(newdate), y:Number(data_median)});
pune_avg.push({x:new Date(newdate), y:Number(data_avg)});
pune_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
pune_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "mumbai") {
mumbai.push({x:new Date(newdate), y:Number(data_median)});
mumbai_avg.push({x:new Date(newdate), y:Number(data_avg)});
mumbai_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
mumbai_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else if(data_region == "goa") {
goa.push({x:new Date(newdate), y:Number(data_median)});
goa_avg.push({x:new Date(newdate), y:Number(data_avg)});
goa_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
goa_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
}
else {
continue;
}
}
var city = cityName.toString();
if(city == "Gurgaon") {
var _name_ = "Gurgaon";
var active = 1;
data_array = gurgaon.slice(gurgaon.length - 4, gurgaon.length);
avg_array = gurgaon_avg.slice(gurgaon_avg.length - 4, gurgaon_avg.length);
tenth_array = gurgaon_tenth_percentile.slice(gurgaon_tenth_percentile.length - 4, gurgaon_tenth_percentile.length);
nintyth_array = gurgaon_nintyth_percentile.slice(gurgaon_nintyth_percentile.length - 4, gurgaon_nintyth_percentile.length);
console.log(nintyth_array);
}
else if(city == "Delhi") {
var _name_ = "Delhi";
var active = 2;
data_array = delhi.slice(delhi.length - 4, delhi.length);
avg_array = delhi_avg.slice(delhi_avg.length - 4, delhi_avg.length);
tenth_array = delhi_tenth_percentile.slice(delhi_tenth_percentile.length - 4, delhi_tenth_percentile.length);
nintyth_array = delhi_nintyth_percentile.slice(delhi_nintyth_percentile.length - 4, delhi_nintyth_percentile.length);
}
else if(city == "Noida") {
var _name_ = "Noida";
var active = 3;
data_array = noida.slice(noida.length - 4, noida.length);
avg_array = noida_avg.slice(noida_avg.length - 4, noida_avg.length);
tenth_array = noida_tenth_percentile.slice(noida_tenth_percentile.length - 4, noida_tenth_percentile.length);
nintyth_array = noida_nintyth_percentile.slice(noida_nintyth_percentile.length - 4, noida_nintyth_percentile.length);
}
else if(city == "Jaipur") {
var _name_ = "Jaipur";
var active = 4;
data_array = jaipur.slice(jaipur.length - 4, jaipur.length);
avg_array = jaipur_avg.slice(jaipur_avg.length - 4, jaipur_avg.length);
tenth_array = jaipur_tenth_percentile.slice(jaipur_tenth_percentile.length - 4, jaipur_tenth_percentile.length);
nintyth_array = jaipur_nintyth_percentile.slice(jaipur_nintyth_percentile.length - 4, jaipur_nintyth_percentile.length);
}
else if(city == "Kolkata") {
var _name_ = "Kolkata";
var active = 5;
data_array = kolkata.slice(kolkata.length - 4, kolkata.length);
avg_array = kolkata_avg.slice(kolkata_avg.length - 4, kolkata_avg.length);
tenth_array = kolkata_tenth_percentile.slice(kolkata_tenth_percentile.length - 4, kolkata_tenth_percentile.length);
nintyth_array = kolkata_nintyth_percentile.slice(kolkata_nintyth_percentile.length - 4, kolkata_nintyth_percentile.length);
}
else if(city == "Bangalore") {
var _name_ = "Bangalore";
var active = 6;
data_array = bangalore.slice(bangalore.length - 4, bangalore.length);
avg_array = bangalore_avg.slice(bangalore_avg.length - 4, bangalore_avg.length);
tenth_array = bangalore_tenth_percentile.slice(bangalore_tenth_percentile.length - 4, bangalore_tenth_percentile.length);
nintyth_array = bangalore_nintyth_percentile.slice(bangalore_nintyth_percentile.length - 4, bangalore_nintyth_percentile.length);
}
else if(city == "Chennai") {
var _name_ = "Chennai";
var active = 7;
data_array = chennai.slice(chennai.length - 4, chennai.length);
avg_array = chennai_avg.slice(chennai_avg.length - 4, chennai_avg.length);
tenth_array = chennai_tenth_percentile.slice(chennai_tenth_percentile.length - 4, chennai_tenth_percentile.length);
nintyth_array = chennai_nintyth_percentile.slice(chennai_nintyth_percentile.length - 4, chennai_nintyth_percentile.length);
}
else if(city == "Pune") {
var _name_ = "Pune";
var active = 8;
data_array = pune.slice(pune.length - 4, pune.length);
avg_array = pune_avg.slice(pune_avg.length - 4, pune_avg.length);
tenth_array = pune_tenth_percentile.slice(pune_tenth_percentile.length - 4, pune_tenth_percentile.length);
nintyth_array = pune_nintyth_percentile.slice(pune_nintyth_percentile.length - 4, pune_nintyth_percentile.length);
}
else if(city == "Mumbai") {
var _name_ = "Mumbai";
var active = 9;
data_array = mumbai.slice(mumbai.length - 4, mumbai.length);
avg_array = mumbai_avg.slice(mumbai_avg.length - 4, mumbai_avg.length);
tenth_array = mumbai_tenth_percentile.slice(mumbai_tenth_percentile.length - 4, mumbai_tenth_percentile.length);
nintyth_array = mumbai_nintyth_percentile.slice(mumbai_nintyth_percentile.length - 4, mumbai_nintyth_percentile.length);
}
else if(city == "Goa") {
var _name_ = "Goa";
var active = 10;
data_array = goa.slice(goa.length - 4, goa.length);
avg_array = goa_avg.slice(goa_avg.length - 4, goa_avg.length);
tenth_array = goa_tenth_percentile.slice(goa_tenth_percentile.length - 4, goa_tenth_percentile.length);
nintyth_array = goa_nintyth_percentile.slice(goa_nintyth_percentile.length - 4, goa_nintyth_percentile.length);
}
else {
console.log("test it");
}
var chart = new CanvasJS.Chart("chart" + active, {
title: {
text: _name_ + " Market Prices",
fontSize: 15,
},
axisX: {
valueFormatString: "DD-MM-YY",
labelFontSize: 10,
},
axisY2: {
title: "Price",
interval: 700,
titleFontSize: 15,
labelFontSize: 10,
prefix: "₹ ",
suffix: " "
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
fontSize: 10,
verticalAlign: "top",
horizontalAlign: "center",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data:[
{
type:"line",
axisYType: "secondary",
name: "Median Price",
showInLegend: true,
markerSize: 1,
yValueFormatString: "#,###",
dataPoints: data_array
},
{
type:"line",
axisYType: "secondary",
name: "Average Price",
showInLegend: true,
markerSize: 1,
yValueFormatString: "#,###",
dataPoints: avg_array
}
]
});
chart.render();
function toogleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
var percentile = new CanvasJS.Chart("percentile" + active, {
title: {
text: _name_ + " Median Price Percentile",
fontSize: 15,
},
axisX: {
valueFormatString: "DD-MM-YY",
labelFontSize: 10,
},
axisY2: {
title: "Percentile",
interval: 700,
titleFontSize: 15,
labelFontSize: 10,
prefix: "₹ ",
suffix: " "
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
fontSize: 10,
verticalAlign: "top",
horizontalAlign: "center",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data:[
{
type:"line",
axisYType: "secondary",
name: "10th Percentile",
showInLegend: true,
markerSize: 1,
yValueFormatString: "#,###",
dataPoints: tenth_array
},
{
type:"line",
axisYType: "secondary",
name: "90th Percentile",
showInLegend: true,
markerSize: 1,
yValueFormatString: "#,###",
dataPoints: nintyth_array
}
]
});
percentile.render();
function toogleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
percentile.render();
}
}
}
}
而不是在每个选项上添加onclick事件侦听器，请尝试将onchange侦听器添加到选择字段。你可以做类似的事情<select onchange = "cityName(event)>"