Javascriptでクリックした時に背景色を変える方法

tableに入った数字をクリックした時、クリックした「table td」の背景色を
変えたいと思います。

但し、背景色が変わるのはクリックした1つのtdだけで、
例えば1をクリックした時、1のtd背景色が赤になり、他は白。
その状態から２をクリックした時、2のtd背景色が赤になり、他は白
というように1つだけの背景色を変更したいです。(?日本語がおかしかったらすみません)

javascriptでわからないのは、document.getElementsByClassNameで、すべての
背景色を白にし、選択した要素のみ赤にするというところです。(現在1つだけ赤くなります)

function Change() {

	elements = document.getElementsByClassName("td01");
	elements[0].style.backgroundColor = 'red';

}

jsdo.itに残してみましたので赤いスタートボタンを押してご覧ください。
http://jsdo.it/i010010/MO9D

よろしくお願いします。

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

回答4件

ベストアンサー

他の方も回答されていますが、getElementsByClassName は HTMLCollection を返すので for でそれぞれ処理すればよいです。

【document.getElementsByClassName() - classで要素を取得する】
https://syncer.jp/javascript-reference/document-getelementsbyclassname

ちなみにCSSでも実現可能です。

CSS
1.td01:target {
2  background-color: red;
3}

HTML
1<table id="tbl01">
2    <tr class="tr01">
3        <td class="td01" id="a01"><a href="#a01">1</a></td>
4        <td class="td01" id="a02"><a href="#a02">2</a></td>
5        <td class="td01" id="a03"><a href="#a03">3</a></td>
6        <td class="td01" id="a04"><a href="#a04">4</a></td>
7        <td class="td01" id="a05"><a href="#a05">5</a></td>
8    </tr>
9</table>
10```**動くサンプル：**[https://jsfiddle.net/87ohaanm/](https://jsfiddle.net/87ohaanm/)
11
12---
13
14
15【[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点 | コリス】
16[http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html](http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html)
17
18【CSS 擬似クラス targetについて - Qiita】
19[http://qiita.com/junya/items/c9741fbddb667992a1ef](http://qiita.com/junya/items/c9741fbddb667992a1ef)

投稿2017/07/02 05:12

kei344

総合スコア69398

退会済みユーザー

2017/07/02 06:07

javascriptでという質問でしたが、もっと簡単な方法があった事を知り解決しました。ありがとうございました！

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

的外れかもしれませんが、以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        #tbl01 {
8            margin: 0 auto;
9            margin-bottom: 15px;
10            width: 200px;
11            text-align: center;
12            border: 1px black solid;
13            border-radius: 8px;
14            background-color: white;
15        }
16
17        .td01 {
18            width: 40px;
19            border: 1px black solid;
20            text-align: center;
21        }
22    </style>
23</head>
24<body>
25<table id="tbl01">
26    <tr class="tr01">
27        <td class="td01" id="a01"><a href="javascript:void(0)" onclick="Change(this); return false;">1</a></td>
28        <td class="td01" id="a02"><a href="javascript:void(0)" onclick="Change(this); return false;">2</a></td>
29        <td class="td01" id="a03"><a href="javascript:void(0)" onclick="Change(this); return false;">3</a></td>
30        <td class="td01" id="a04"><a href="javascript:void(0)" onclick="Change(this); return false;">4</a></td>
31        <td class="td01" id="a05"><a href="javascript:void(0)" onclick="Change(this); return false;">5</a></td>
32    </tr>
33</table>
34<script>
35    function Change(arg) {
36        var td01 = document.getElementsByClassName("td01");
37        for (var i = 0; i < td01.length; i++) {
38            if (td01[i] === arg.parentNode) {
39                td01[i].style.backgroundColor = "#ff0000";
40            } else {
41                td01[i].style.backgroundColor = "#ffffff";
42            }
43        }
44    }
45</script>
46</body>
47</html>

投稿2017/07/02 04:04

s8_chu

総合スコア14731

退会済みユーザー

2017/07/02 06:09

いただいた回答を試してみましたが、なぜか思うようにいきませんでした。 CSSで簡単にできたので、それで良しとしました。ありがとうございました。

s8_chu

2017/07/02 06:11

こちらでは動作しているのですが、なぜでしょうね。

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

恥ずかしながらCSSで簡単にできました。

.td01:target {
background-color: red;
}

投稿2017/07/02 06:10

退会済みユーザー

総合スコア0

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>aa</title>
<style>
#tbl01 { 
    margin: 0 auto;
    margin-bottom: 15px;
    width: 200px;
    text-align: center;
    border: 1px black solid ;
    border-radius: 8px;
    background-color:white;
    
}

.td01{
    width: 40px;
    border: 1px black solid ;
    text-align: center;
}
</style>
</head>
<body>
<table id="tbl01">
    <tr class="tr01">
        <td class="td01" id="a01"><a href="javascript:void(0)" onclick="Change(this); return false;">1</a></td>
        <td class="td01" id="a02"><a href="javascript:void(0)" onclick="Change(this); return false;">2</a></td>
        <td class="td01" id="a03"><a href="javascript:void(0)" onclick="Change(this); return false;">3</a></td>
        <td class="td01" id="a04"><a href="javascript:void(0)" onclick="Change(this); return false;">4</a></td>
        <td class="td01" id="a05"><a href="javascript:void(0)" onclick="Change(this); return false;">5</a></td>
    </tr>
</table>
<script>
  const cl = document.getElementsByClassName("td01");
   function Change(e) {
            const a =  e.parentNode;
			for(let i = 0; cl.length>i;i++){
				cl[i].style.backgroundColor = 'white';
				a.style.backgroundColor = 'red';
			}
   }
</script>
</body>
</html>

こんな感じ？

投稿2017/07/02 04:22

編集2017/07/02 04:22