今javascriptで押すと色が変わるボタンを設定したいのですが、
case文やif文をどのように設定すればボタンがプッシュされるごとに色が変わって、
また次押すまでその色が保持されるかわかりません。
ひとまずcssは4種類ボタンのデザインを用意していて、
ボタンを押すとボタンの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がadまでありますが今回はbdは関係ないです。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/15 05:47
2018/04/15 05:53
2018/04/15 07:25
2018/04/15 07:44
2018/04/15 10:06