Привет. Я пытаюсь создать сайт, который показывает текущую погоду (в 3 городах на данный момент). Моя проблема в том, что я не знаю, как я могу получить только данные JSON для обновления, когда переключатель находится в положении ON. (Поэтому я не хочу перезагружать страницу после интервала, я просто хочу автоматически обновлять температуру и т. Д. Через определенный период времени.)
Вот изображение сайта: 
Вот моя реализация. Кажется, не могу понять это, так как, по моему мнению, это должно сработать: D Сейчас слишком долго на это смотрели.
JavaScript
function setup() {
var dropinput = document.getElementById("city-dropdown");
var value = dropinput.options[dropinput.selectedIndex].value;
var url = api + value + units + apiKey;
fetch(url).then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
response.json().then(function(data) {
document.getElementById("temp").innerHTML = 'Temperature: ' + data.main.temp + ' Celsius'
document.getElementById("wind").innerHTML = 'Wind: ' + data.wind.speed + ' m/s'
document.getElementById("humidity").innerHTML = 'Humidity: ' + data.main.humidity + '%'
});
}
)
}
var interval = null;
function autoupdate() {
var checkBox = document.getElementById("switch");
if (checkBox.checked == true) {
interval = setInterval(setup(), 1000);
} else {
clearInterval(interval);
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="slideshow.js"></script>
</head>
<body onload="setup()">
<div class="container">
<h1>Check the weather!</h1>
<fieldset>
<form action="/" method="post">
<select name="city" id="city-dropdown">
<option value="Helsinki">Helsinki</option>
<option value="Turku">Turku</option>
<option value="Kuusamo">Kuusamo</option>
</select>
<button class="nappi" type="button" onclick="setup()">Get weather</button>
</form>
</fieldset>
<p id="temp">Temperature: </p>
<p id="wind">Wind: </p>
<p id="humidity">Humidity: </p>
</div>
<div class="update">
<p id="autoupdate">Auto-update:</p>
<label class="switch">
<input type="checkbox" id="switch" onclick="autoupdate()">
<span class="slider round"></span>
</label>
</div>
</body>
</html>