配列の要素を、クリックする事で表示させたい。

初めまして。プログラミング初心者です。

現在、OpenWeatherMapのAPIを使用し、簡単な「世界中の都市のお天気情報を知ることができるwebアプリ」を作成しています。

そこで、API「http://api.openweathermap.org/data/2.5/weather?q={city}&appid={key}&lang=ja&units=metric」の{city}の部分を配列で格納し、**その都市が書かれたボタンが押された際にその都市の天気を表示させたいのですが、配列の要素とボタンとの結合方法がわからずに苦戦しています。**

どなたかご教授いただけると幸いです。
宜しくお願い致します。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Weather App</title>
</head>
<body> 
    <div class="header">
        <h1>世界の天気</h1>
    </div>

    <div class="button-section">
        <button class="city">東京</button>
        <button class="city">シアトル</button>
        <button class="city">ロンドン</button>
        <button class="city">パリ</button>
        <button class="city">ベルリン</button>
        <button class="city">上海</button>
    </div>

    <div class="temperature">
        <p>天気：
            <span class="weather"></span>
        </p>
        <p>現在の気温：
            <span class="degree"></span>
        ℃</p>
    </div>
    <script src="index.js"></script>
</body>
</html>

function onClick(city) {
    let temperatureDegree = document.querySelector('.degree');
    let weather = document.querySelector('.weather');
    let places = ["Tokyo,JP", "Seattle,US", "London,UK", "Paris,FR", "Berlin,DE", "Shanghai,CN"];

     document.querySelector(city).addEventListener('click', () => {
        for(let i = 0; i < places.length; i++) {
            const api = `http://api.openweathermap.org/data/2.5/weather?q=${places[i]}&appid=e8b390837bdaa5ecda28903339b6a197&lang=ja&units=metric`;
        
            fetch(api)
            .then(response => {
                return response.json();
            })
            .then(data => {
                console.log(data);
                const { temp } = data.main;
                const { description } = data.weather[0];
                temperatureDegree.textContent = Math.floor(temp);
                weather.textContent = description;
            }); 
        }
        
    });
 
}




onClick('.city');

試したこと

for文で処理を行うも、配列の先頭の要素しか取得できない。

補足情報（FW/ツールのバージョンなど）

vscodeを使用しています。

meg_

2021/05/05 05:25

エラーは発生していますか？

行動規範の内容に同意します

回答1件

ベストアンサー

「順番で紐付ける」という手段が必須というわけでないのであれば、data-***属性としてボタンに持たせる、のがやりやすいです。

なお、document.querySelectorは1つ目の要素しか取れません。

html
1    <div class="button-section">
2        <button class="city" type="button" data-key="Tokyo,JP">東京</button>
3        <button class="city" type="button" data-key="Seattle,US">シアトル</button>
4        <button class="city" type="button" data-key="London,UK">ロンドン</button>
5        <button class="city" type="button" data-key="Paris,FR">パリ</button>
6        <button class="city" type="button" data-key="Berlin,DE">ベルリン</button>
7        <button class="city" type="button" data-key="Shanghai,CN">上海</button>
8    </div>

javascript
1function onClick(city) {
2    let temperatureDegree = document.querySelector('.degree');
3    let weather = document.querySelector('.weather');
4    let places = ["Tokyo,JP", "Seattle,US", "London,UK", "Paris,FR", "Berlin,DE", "Shanghai,CN"];
5
6     document.querySelectorAll(city).forEach(button => button.addEventListener('click', (e) => {
7          const api = `http://api.openweathermap.org/data/2.5/weather?q=${e.target.dataset.key}&appid=e8b390837bdaa5ecda28903339b6a197&lang=ja&units=metric`;
8
9          fetch(api)
10            .then(response => {
11                return response.json();
12            })
13            .then(data => {
14                console.log(data);
15                const { temp } = data.main;
16                const { description } = data.weather[0];
17                temperatureDegree.textContent = Math.floor(temp);
18                weather.textContent = description;
19            }); 
20
21    }));
22
23}