javascriptでIDで取得したもののフォントカラーを変更しても1つしか適用されない。

JavascriptとHTMLを使っています。
ボタンが押されたら文字色を変えるコードを書きました。

PHPでデータベース（MySQL）を取得してそれをテーブルに表示させています。そして、
最初の文字色を白にして、「表示」ボタンを押したら赤くして「解答」の部分を表示させたいと思っています。

PHP
1  $pdo = new PDO($connect, $db_user, $db_pass, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
2  $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
3  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
4  
5  echo "<p>Success!!</p>";
6  
7  $sql = "SELECT name,comment FROM board";
8  $stmt = $pdo->prepare($sql);
9  $stmt->execute();
10  
11  $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

HTML
1<html>
2<head>
3<link rel="stylesheet" href="style2.css">
4</head>
5<body>
6<table class="sample" align="center">
7  <tr>
8    <th>チーム名</th>
9    <th>解答</th>
10  </tr>
11  <?php foreach ($result as $row) {?>
12  <tr>
13    <td><?php echo $row['name']; ?></td>
14    <td id="an" style="color:white"><?php echo $row['comment']; ?></td>
15  </tr>
16  <?php } ?>
17</table>
18<br>
19<form action="" method="post">
20    <button type="button" name="open" class="Form-Btn" id="my_button" onclick="changeColor()">表示</button>
21</html>

javascript
1function changeColor(){
2  var obj = document.getElementById('an');
3  document.getElementById("an").style.color = "red";
4}

しかし、最初の1行目しか色が変わりません。

上の写真のような状況です。

何が問題なのでしょうか？

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

回答2件

「ID」は特定できる要素でなければなりません。
同ページ内に重複は構文としてNGです。
classは重複OKなので同名classを振って対応してください。

投稿2021/06/17 12:32

m.ts10806

総合スコア80875

ベストアンサー

そもそも同じidを持つ要素を複数持つことはできません。
やるならidではなくclassでしょうね。
で、たとえばこんな風に処理します。

JavaScript
1let elements = document.getElementsByClassName('an');
2let elementArray = Array.from(elements);
3elementArray.forEach(function(e) {
4  e.style.color = "red";
5});