ボタンをクリックしてclassをローテーションさせたいです。

###classをローテーションさせたいです。

<a href="#" class="btn_red">Button</a>

現状で、class="btn_red"となっているボタンをクリックすることによって、

class="btn_red"
↓
class="btn_blue"
↓
class="btn_yellow"
↓
class="btn_black"
↓
class="btn_red"

とローテションさせたいです。
宜しくお願いいたします。

kei344

2017/01/05 12:42

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

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

回答1件

ベストアンサー

addEventListener関数を使ってクリックしたときに何をするかを書きます。change_colorという配列を用意して、そこからクラスに設定したい名前をクリックされるごとに順番に取り出しています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Varinus</title>
6</head>
7<body>
8<a href="#" id="backbutton" class="btn_red">back</a>
9<script type="text/javascript">
10    var count = 0;
11    var change_color = [
12        "red",
13        "blue",
14        "yellow",
15        "black"
16    ];
17    document.getElementById("backbutton").addEventListener("click", function (e) {
18        if (count >= (change_color.length - 1)) {
19            count = 0;
20        } else {
21            count = count + 1;
22        }
23        this.className = "btn_" + change_color[count];
24        alert(this.className);
25        return false;
26    });
27</script>
28</body>
29</html>