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;
}
ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
お礼
回答ありがとうございます。 仰られた通りにエラーログファイルを参照しながらルート設定を変えていったところ、なんとか正しいルートを設定することが出来ました。 404 Not Found も正解です。 こんなにも早く解決するとは正直思っていなかったので大変助かりました。 ご丁寧にどうもありがとうございました。