今javascriptで押すと色が変わるボタンを設定したいのですが、
case文やif文をどのように設定すればボタンがプッシュされるごとに色が変わって、
また次押すまでその色が保持されるかわかりません。

ひとまずcssは４種類ボタンのデザインを用意していて、
ボタンを押すとボタンのid=aに加えてクラスが追加されるようにしています。
クラスはa1~a4の4つです。
a1=ボタンを押して引っ込む、色は黄色のまま(初期色)
a2=ボタンを離して出てくる色は水色
a3=ボタンを押して引っ込む、色は水色
a4=ボタンを離して出てくる色は黄色

このデザインのa1~a4をボタンを押すごとに順に進むようにしたいです。
今書いているコードはa2の状態までしか書いていないので一度ボタンを押して話すと水色の状態のままです。

回答お待ちしています。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4      <meta charset="utf-8">
5      <title>*</title>
6      <link rel="stylesheet" href="style.css">
7  </head>
8
9  <body>
10      <div class="all">
11      <div class="all1">
12      <div id="a"></div>
13      <div id="b"></div>
14      </div>
15
16      <div class="all2">
17      <div id="c"></div>
18      <div id="d"></div>
19    </div>
20
21    </div>
22
23    <script src="main.js"></script>
24  </body>
25</html>
26

idがa~~dまでありますが今回はb~~dは関係ないです。

css
1@charset
2
3body{
4  background-color: gray;
5  opacity:0.7;
6}
7
8.all{
9  margin-left: 400px;
10
11}
12
13#a,#b,#c,#d{
14  height:200px;
15  width:200px;
16
17  border-radius: 50%;
18  box-shadow: 0 10px 0 #D1483E;
19  border:solid 3px #D1483E;
20  user-select: none;
21
22}
23
24#a{
25  background-color: yellow;
26}
27
28#a.a3{
29  background-color: yellow;
30  margin-top: 10px;
31  box-shadow: 0 10px 0 #D1483E
32}
33
34#a.a4{
35
36  background-color: skyblue;
37  /*
38  margin-top: 10px;
39  */
40  box-shadow: 0 10px 0 #D1483E;
41
42}
43
44
45
46#a.a1{
47  background-color: yellow;
48  margin-top: 10px;
49  box-shadow: 0 4px 0 #D1483E;
50
51}
52
53#a.a2{
54  background-color: skyblue;
55  margin-top: 10px;
56  box-shadow: 0 4px 0 #D1483E;
57
58}
59
60#b{
61  background-color: green;
62}
63
64#c{
65  background-color: red;
66}
67
68#d{
69  background-color: blue;
70}
71
72#a,#c{
73  float:left;
74}
75
76#b,#c{
77  float:right;
78}
79
80.all1{
81  width:450px;
82  height:210px;
83  display: block;
84}
85
86.all2{
87  margin-top: 50px;
88  width:450px;
89  height:210px;
90}
91

javascript
1(function(){
2  'use strict';
3
4  var a=document.getElementById('a');
5
6  /*
7  a=yellow 初期
8  a1=skyblue 押した
9  a2=skyblue　離した
10  a3=yellow　押した
11  a4=yellow　離した
12  */
13
14/*a1とa2のみ*/
15  a.addEventListener('mousedown',function(){
16  this.className='a1';
17
18  });
19/*a4とa3のみ*/
20
21  a.addEventListener('mouseup',function(){
22  this.className='a4';
23
24  });
25
26  })();

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

回答2件

ベストアンサー

function foo(list) {
	var i = 0;
	var max = list.length;
	return function baz() {
		if (i >= max) {
			i = 0;
		}
 		return list[i++];
	}	
}

const hoge = foo(['a', 'b', 'c', 'd']);

console.log(hoge()); //a
console.log(hoge()); //b
console.log(hoge()); //c
console.log(hoge()); //d
console.log(hoge()); //a
console.log(hoge()); //b

質問を読み間違えている可能性はありますが、少なくとも「このデザインのa1~a4をボタンを押すごとに順に進むようにしたいです。」の行までの説明を読む限りでは、とりあえず呼び出される度に次のクラス名を返してくれるようなものがあれば良いのかなと思ったので簡易的なものを書いてみました。

関数や変数の命名は適当につけましたが、あとはhoge関数をmousedownやmouseupの度に呼んであげればよいのかなと。

ES6対応OKな場合

function* foo(list) {
	let i = 0;
	const max = list.length;
	while (i < max) {
		yield list[i++];
	}
	yield* foo(list);
}

const hoge = foo(['a', 'b', 'c', 'd']);
console.log(hoge.next().value) //a
console.log(hoge.next().value) //b
console.log(hoge.next().value) //c
console.log(hoge.next().value) //d
console.log(hoge.next().value) //a
console.log(hoge.next().value) //b

lazexさんからコメント欄で頂いたコード

function* foo(list) {
	while(true) {
		yield* list;
	}
}

const hoge = foo(['a', 'b', 'c', 'd']);
console.log(hoge.next().value) //a
console.log(hoge.next().value) //b
console.log(hoge.next().value) //c
console.log(hoge.next().value) //d
console.log(hoge.next().value) //a
console.log(hoge.next().value) //b

追記 (使い方のイメージ)

https://codepen.io/anon/pen/aYgKgz

<div id='target' class=''></div>

#target {
  width: 100px;
  height: 100px;
  border: solid 1px #000000;
}

.a {
  background: red;
}

.b {
  background: blue;
}

.c {
  background: yellow;
}

.d {
  background: green;
}

function foo(list) {
    var i = 0;
    var max = list.length;
    return function baz() {
        if (i >= max) {
            i = 0;
        }
         return list[i++];
    }    
}

const hoge = foo(['a', 'b', 'c', 'd']);


var $target = document.getElementById('target');

$target.addEventListener('mousedown',function(){
  this.className = hoge();
});

$target.addEventListener('mouseup',function(){
  this.className = hoge();
});

投稿2018/04/15 05:12

編集2018/04/15 09:06