javascript
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=320,user-scalable=no"> 6<title>ボタン早押しゲーム</title> 7<style> button {width:40px; height:40px; font-size:12px; webkit-border-radius:1px; boder-radius:1px;} 8 #startButton { width:80%; } </style> 9</head><body> 10 <h1>ボタン早押し</h1> 11 <div style="width:310px;"> 12 <div id="buttons"></div> 13 <div id="mihon"></div> 14 <div><button id="startButton">開始</button></div> 15 </div> 16<script type="text/javascript"> 17 18var iroha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 19var pushed = ""; 20var startTime; 21var labelArray = alpha.split(""); 22$("startButton").onclick = start; 23$("mihon").innerHTML = alpha; 24 25nextGame(); 26 27function nextGame(){ 28 $("buttons").innerHTML = ""; 29 $("startButton").style.visibility = "visible"; 30} 31 32function start(){ 33 $("startButton").style.visibility = "hidden"; 34 arrayShuffle(labelArray); 35 for (var i = 0; i < labelArray.length; i++) { 36 var b = document.createElement("button"); 37 b.innerHTML = labelArray[i]; 38 b.onclick = button_clickHandler; 39 $("buttons").appendChild(b); 40 } 41 startTime = (new Date()).getTime(); 42} 43 44function button_clickHandler(e){ 45 var ch = e.target.innerHTML; 46 var tmp = pushed + ch; 47 if(alpha.substr(0, tmp.length) != tmp) { 48 alert("違います。次は、"+ alpha.substr(pushed.length,1)); 49 return; 50 } 51 e.target.disabled = true; 52 e.target.style.backgroundColor = "#909090"; 53 pushed = tmp; 54 if(pushed == iroha){ 55 var now = new Date().getTime(); 56 var tm = Math.floor((now - startTime) / 1000); 57 alert("おめでとうございます。\n" + tm + "秒でクリア!"); 58 nextGame(); 59 } 60} 61 62function arrayShuffle(bs) { 63 for(var i=0; i < bs.length; i++) { 64 var r = Math.floor(Math.random()*bs.length); 65 var tmp = bs[i]; 66 bs[i] = bs[r]; 67 bs[r] = tmp; 68 } 69} 70 71function $(id) { return document.getElementById(id); } 72</script> 73</body> 74</html> 75
上記コードで無作為に並べられたアルファベットを順番に押していくアプリを作ろうと思っています。しかし、実行してみると開始ボタンを押しても何も動きません。なぜか分かる方いますでしょうか?
また、$()の意味を教えていただけるとありがたいです。
参考にした記事があれば、URLを質問文に追記ください。(URLにはリンクを張ることができます)
回答1件
あなたの回答
tips
プレビュー