问题遇到的现象和发生背景
无法把两个下拉菜单呈现出来，只能呈现一个
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
<title>Final Assigment</title>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="final.css">
</head>
<body onload="thirty_measurement()">
<h2>Tier4 </h2>
<button class="btn" id="free_choice">Free Choice</button>
<div id="DropDown"></div>
<div id="output"></div>
<canvas id="weather_chart" width="500" height="300"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script defer src="final.js"></script>
</body>
</html>
let chart1 = null;
const setList = document.getElementById("DropDown");
document.getElementById('free_choice').addEventListener('click', DropDown4);
function DropDown4(type) {
setList.innerHTML = null;
setList.innerHTML = `<select onchange="selectList4(this.value),'${type}'">
<option selected>Please select a time period</option>
<option value="1">Rain</option>
<option value="2">Wind Speed</option>
<option value="3">Wind Direction</option>
<option value="4">Light</option>
<option value="5">Temperature</option>
</select>
`
}
function DropDown5(type) {
setList.innerHTML = null;
setList.innerHTML = `<select onchange="selectList5(this.value),'${type}'">
<option selected>Please select a time period</option>
<option value="1">Now</option>
<option value="2">24 hours</option>
<option value="3">48 hours</option>
<option value="4">72 hours</option>
<option value="5">One week</option>
</select>
`
}
function selectList4(value,type) {
if(type ==1){
if (value == 1) {
free_choice25_rain("http://webapi19sa-1.course.tamk.cloud/v1/weather/rain");
}
else if (value == 2) {
free_choice1("http://webapi19sa-1.course.tamk.cloud/v1/weather/rain/23");
}
else if (value == 3) {
free_choice1("http://webapi19sa-1.course.tamk.cloud/v1/weather/rain/47");
}
else if (value == 4) {
free_choice1("http://webapi19sa-1.course.tamk.cloud/v1/weather/rain/71");
}
else {
free_choice1("http://webapi19sa-1.course.tamk.cloud/v1/weather/rain/167");
}
}
if(type ==2){
if (value == 1) {
free_choice25_wind_speed("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_speed");
}
else if (value == 2) {
free_choice2("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_speed/23");
}
else if (value == 3) {
free_choice2("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_speed/47");
}
else if (value == 4) {
free_choice2("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_speed/71");
}
else {
free_choice2("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_speed/167");
}
}
if(type ==3){
if (value == 1) {
free_choice25_wind_direction("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_direction");
}
else if (value == 2) {
free_choice3("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_direction/23");
}
else if (value == 3) {
free_choice3("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_direction/47");
}
else if (value == 4) {
free_choice3("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_direction/71");
}
else {
free_choice3("http://webapi19sa-1.course.tamk.cloud/v1/weather/wind_direction/167");
}
}
function free_choice25_rain(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>25 Free Choice Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < 25; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.rain;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.rain}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_25rain(x_axis, y_axis, data.length);
})
}
function chart_25rain(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
chartName = "The Latest 25 Rain Data";
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
function free_choice25_wind_speed(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>25 Free Choice Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < 25; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.wind_speed;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.wind_speed}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_25wind_speed(x_axis, y_axis, data.length);
})
}
function chart_25wind_speed(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
chartName = "The Latest 25 Wind Speed Data";
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
function free_choice25_wind_direction(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>25 Free Choice Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < 25; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.wind_direction;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.wind_direction}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_25wind_direction(x_axis, y_axis, data.length);
})
}
function chart_25wind_direction(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
chartName = "The Latest 25 Wind Direction Data";
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
function free_choice1(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>Rain Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured Rain value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < data.length; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.rain;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.rain}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_rain(x_axis, y_axis, data.length);
})
}
function chart_rain(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
if (period == 25) {
chartName = "The Latest 25 Rain Data";
}
else if (period == 24) {
chartName = "The Latest 24 Hourly Avg Rain Data"
}
else if (period == 48) {
chartName = "The Latest 48 Hourly Avg Rain Data"
}
else if (period == 72) {
chartName = "The Latest 72 Hourly Avg Rain Data"
}
else {
chartName = "The Latest 1 Week Hourly Avg Rain Data"
}
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
function free_choice2(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>20 Wind Speed Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured Wind Speed value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < data.length; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.wind_speed;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.wind_speed}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_windspeed(x_axis, y_axis, data.length);
})
}
function chart_windspeed(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
if (period == 25) {
chartName = "The Latest 25 Wind Speed Data";
}
else if (period == 24) {
chartName = "The Latest 24 Hourly Avg Wind Speed Data"
}
else if (period == 48) {
chartName = "The Latest 48 Hourly Avg Wind Speed Data"
}
else if (period == 72) {
chartName = "The Latest 72 Hourly Avg Wind Speed Data"
}
else {
chartName = "The Latest 1 Week Hourly Avg Wind Speed Data"
}
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
function free_choice3(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `<h2>20 Wind Direction Data</h2>
<table class="tableView2">
<tr>
<th>Row Number</th>
<th>Measurement Date</th>
<th>Measurement Time</th>
<th>Measured Wind Direction value</th>
</tr>
`;
let x_axis = new Array();
let y_axis = new Array();
for (let i = 0; i < data.length; i++) {
const weatherData = data[i];
let arr = weatherData.date_time.split("T");
//Here using split to devide array, as it has T at the end of date and time
let sep_date = arr[0];
let sep_time = arr[1];
x_axis[i] = sep_time;
y_axis[i] = weatherData.wind_direction;
output += `
<tr>
<td>${i + 1}</td>
<td>${sep_date}</td>
<td>${sep_time}</td>
<td>${weatherData.wind_direction}</td>
</tr>
`;
}
output+='</table>'
document.getElementById('output').innerHTML = output;
chart_winddirection(x_axis, y_axis, data.length);
})
}
function chart_winddirection(sep_date, weatherData, period) {
const ctx = document.getElementById('weather_chart').getContext('2d');
if (period == 25) {
chartName = "The Latest 25 Wind Direction Data";
}
else if (period == 24) {
chartName = "The Latest 24 Hourly Avg Wind Direction Data"
}
else if (period == 48) {
chartName = "The Latest 48 Hourly Avg Wind Direction Data"
}
else if (period == 72) {
chartName = "The Latest 72 Hourly Avg Wind Direction Data"
}
else {
chartName = "The Latest 1 Week Hourly Avg Wind Direction Data"
}
if (chart1 != null) {
chart1.destroy();
}
chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sep_date,
datasets: [{
data: weatherData,
backgroundColor: 'reba(127,255,127,0.4)',
borderWidth: 3,
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: chartName,
},
animation: false,
events: []
}
});
}
运行结果及报错内容
运行后只显示第一个下拉菜单，
我的解答思路和尝试过的方法
尝试使用
- ，但这是不同方法，想纯粹用select做出两个下拉菜单，
无法顺利连接两个下拉菜单与功能我想要达到的结果
想要点击Free Choice以后，出现两个下拉菜单，根据两个下拉菜单选择的内容，呈现不同数据和图表
