ボタン早押しゲーム

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

上記コードで無作為に並べられたアルファベットを順番に押していくアプリを作ろうと思っています。しかし、実行してみると開始ボタンを押しても何も動きません。なぜか分かる方いますでしょうか？
また、$()の意味を教えていただけるとありがたいです。

kei344

2017/01/10 14:19

参考にした記事があれば、URLを質問文に追記ください。（URLにはリンクを張ることができます）

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

回答1件

ベストアンサー

$()での$は関数名として扱われます。なので、質問者さんのコードでは$("idセレクタ名")とすると、document.getElementById("idセレクタ名")が返されることになります。
質問者さんのコードに書いてあるalphaとは一体なんでしょうか？alphaをirohaに置き換えれば動くと思いますが...

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=320,user-scalable=no">
7    <title>ボタン早押しゲーム</title>
8    <style> button {
9        width: 40px;
10        height: 40px;
11        font-size: 12px;
12        webkit-border-radius: 1px;
13        boder-radius: 1px;
14    }
15
16    #startButton {
17        width: 80%;
18    } </style>
19</head>
20<body>
21<h1>ボタン早押し</h1>
22<div style="width:310px;">
23    <div id="buttons"></div>
24    <div id="mihon"></div>
25    <div>
26        <button id="startButton">開始</button>
27    </div>
28</div>
29<script type="text/javascript">
30
31    var iroha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
32    var pushed = "";
33    var startTime;
34    var labelArray = iroha.split("");
35    $("startButton").onclick = start;
36    $("mihon").innerHTML = iroha;
37
38    nextGame();
39
40    function nextGame() {
41        $("buttons").innerHTML = "";
42        $("startButton").style.visibility = "visible";
43    }
44
45    function start() {
46        $("startButton").style.visibility = "hidden";
47        arrayShuffle(labelArray);
48        for (var i = 0; i < labelArray.length; i++) {
49            var b = document.createElement("button");
50            b.innerHTML = labelArray[i];
51            b.onclick = button_clickHandler;
52            $("buttons").appendChild(b);
53        }
54        startTime = (new Date()).getTime();
55    }
56
57    function button_clickHandler(e) {
58        var ch = e.target.innerHTML;
59        var tmp = pushed + ch;
60        if (iroha.substr(0, tmp.length) != tmp) {
61            alert("違います。次は、" + iroha.substr(pushed.length, 1));
62            return;
63        }
64        e.target.disabled = true;
65        e.target.style.backgroundColor = "#909090";
66        pushed = tmp;
67        if (pushed == iroha) {
68            var now = new Date().getTime();
69            var tm = Math.floor((now - startTime) / 1000);
70            alert("おめでとうございます。\n" + tm + "秒でクリア！");
71            nextGame();
72        }
73    }
74
75    function arrayShuffle(bs) {
76        for (var i = 0; i < bs.length; i++) {
77            var r = Math.floor(Math.random() * bs.length);
78            var tmp = bs[i];
79            bs[i] = bs[r];
80            bs[r] = tmp;
81        }
82    }
83
84    function $(id) {
85        return document.getElementById(id);
86    }
87</script>
88</body>
89</html>