• 締切済み

CSSでのボタンのエフェクト

数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

ご期待とまったく反する回答になりますが、 　フォームのコントロールと言うユーザーインターフォース(UI)は、そのデザインを変えてはなりません。やりすぎです。初心者が懲りたい気持ちは分かりますが、javascriptが無効のユーザーはワケワカメになってしまいます。 　CSSでも、フォームのUIを変更するプロパティが用意されていません。 　CSS3の:checkedなどで、背景は変更できますがデザインは変更すべきではありません。 　

DreamyLife_615
質問者

補足

ボタンを円の形に変えて背景色を付けただけのにしてみましたがこれでも無理ですかね #button_0{ background:#E75A7D; height:60px; width: 60px; margin-right : 5px; margin-top: 10px; font-size:1.3em; outline: none; border-radius: 50%;}

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

CSS3でよければ、そのままで #board > input:disabled { 　　background : red; } とかで、自由に。 そうでなければ、disabled設定の時に別にクラス設定をしてあげて、そのクラスに対して（↑）と同様にCSSを設定しておくのが簡単かと。

DreamyLife_615
質問者

補足

下記の中に埋め込めばいいんですか？ #board > input { height:60px; width: 90px; margin-right : 5px; margin-top: 10px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 （一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。 名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 　・0～９のイベントは正しく登録されている。 　・しかし、全てがchecked(10)を呼んでいる 質問１ 　これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 　 質問２（オプション） 　参考になる資料を教えていただければ幸いです。 　例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。　*/ for (i=2; i<4; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

  • javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。

    モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button　～ onClick>とかがつかわれているとうれしいです。

  • ボタンに書かれている文字の入れ替え

    ２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>

  • ラジオボタンとフォーム検索の結び付け

    スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。 まずラジオボタンで「武器」か「防具」を選びます。 そして値段を入れると 「武器・600」＝勇者の剣 「防具・600」＝盾 といったように選んだラジオボタンによって同じ数字でも 表示結果を変えたいと考えています。 ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。 ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。 チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、 もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。 そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。 よろしくお願いします。 【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>

  • JS初心者です。このコードの式を教えてください

    下記はストップウォッチのコードとなります 「startTime = startTime + (new Date()).getTime() - stopTime;」 ここの式の意味がわかりません。 startTimeは 「if (!startTime) { startTime = (new Date()).getTime(); }」 の部分で、０秒にセットされている？と思います。 ですのでストップウォッチをスタートした1秒後にストップを作動させ、再度スタートさせるときの時間は 「startTime = startTime + (new Date()).getTime() - stopTime;」つまり 「startTime = ０秒 + (new Date()).getTime() - 1秒;」 と言い換えられると思います。単純に考えて1秒でストップさせてスタートする時刻も1秒目からですので、自ずと(new Date()).getTime()の中身は２秒になっちゃうと思っているのですが、どこからそのような数字がくるんだよということで絶対に違うと思います。 色々とわかりません。どなたかこの式を教えてください！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" id="run"> <input type="button" value="Stop!" id="stop"> <input type="button" value="Reset!" id="reset"> <script> (function(){ var startTime, stopTime, running = false, timerId; document.getElementById('run').onclick = function(){ run(); } document.getElementById('stop').onclick = function(){ stop(); } document.getElementById('reset').onclick = function(){ reset(); } function run() { if(running) return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (!startTime) { startTime = (new Date()).getTime(); } timer(); } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); timerId = setTimeout(function() { timer(); }, 100); } function stop() { if(!running) return false; running = false; clearTimeout(timerId); stopTime = (new Date()).getTime(); } function reset() { if(running) return; startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } }()); </script> </body> </html>

  • <input type="file"/>

    に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • javascriptのストップウオッチのコード

    javascript初級勉強中です。 以下のコードを実行すると(1)小数点第２の動きがおかしい。 　(2)一度リセットボタンを押さないとタイマーが動かない。 という２点の不具合が出ます。 　　どうすれば解決するでしょうか？ <!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウオッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" onclick="run();"> <input type="button" value="Stop!" onclick="stop();"> <input type="button" value="Reset!" onclick="reset();"> <script> var statTime, stopTime, running = false, timerId; function run() { if (running)return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (! startTime) { startTime = (new Date()).getTime(); } timer(); //タイマー処理回していく } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2); timerId =setTimeout(function() { timer(); //このタイマー自身を回していく }, 100); } function stop() { if (!running) return false; running = false; clearTimeout(timerId); //timerIdを渡して止める stopTime = (new Date()).getTime(); } function reset() { if (running) return; 　　startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } </script> </body> </html>

  • javascriptのonclickに関数を追加？

    現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。

  • DOMで作ったラジオボタンが選択できない

    JavaScript DOM で作成したラジオボタンが選択できません。 Sleipnirの「選択部分のソースを表示」で確認したところ、 name属性だけがセットされていないようで、選択できない原因はそれだと思いますが、 セットできない理由が分かりません。 どなたか解決策を教えて頂けないでしょうか。 なお、下記の何れの方法でもダメなようです。 obj.name = "hogehoge" obj.setAttribute("name", "hogehoge"); 念のため、現象確認用のソースも貼っておきます。 <html> <head> <script type="text/javascript"> function create1() { var rObj = document.createElement("input"); rObj.type = "radio"; rObj.name = "rd"; rObj.value = 5; var divObj = document.getElementById("box"); divObj.appendChild(rObj); } function create2() { var rObj = document.createElement("input"); rObj.setAttribute("type", "radio"); rObj.setAttribute("name", "rd"); rObj.setAttribute("value", "3"); var divObj = document.getElementById("box"); divObj.appendChild(rObj); } </script> </head> <body> <input type="button" value="create1" onClick="create1()"> <input type="button" value="create2" onClick="create2()"> <div id="box"></div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する