onclickでfunction関数を3つ以上起動させたい

前提・実現したいこと

Monacaでボタンをクリックすると、「複数のパネルの色が６種類の中でランダムに変更される」システムを作っています。
また、最終的には256個のパネルの色を同時に変更する事を目標にしています。
onclickで3つ以上のfunction関数の処理機能を実装中に以下の問題が発生しました。

発生している問題・エラーメッセージ

    <div id="bottombar">
       <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="play();play2()">
    </div>
↑これで2つまでは処理できるのですが、
       <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="play();play2();play3();play4()">
↑これだと3つ目以下を処理してくれません。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    
10    <script>
11        function play (){
12            var no = Math.floor(Math.random() * 6);
13
14            // ランダム値に応じて表示する画像を変える
15            var image_name;
16            if (no == 0) {
17                image_name = "gazo-1.png";
18            } else if (no == 1) {
19                image_name = "gazo-2.png";
20            } else if (no == 2) {
21                image_name = "gazo-3.png";
22            } else if (no == 3) {
23                image_name = "gazo-4.png";
24            } else if (no == 4) {
25                image_name = "gazo-5.png";                
26            } else {
27                image_name = "gazo-6.png";
28            }
29        
30            document.getElementById("saisyo").style["display"] = "none";
31            document.getElementById("kekka").src = "images/" + image_name;
32            document.getElementById("kekka").style["display"] = "inline";
33            document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png";
34        }
35        function play2 (){
36            var no = Math.floor(Math.random() * 6);
37
38            // ランダム値に応じて表示する画像を変える
39            var image_name;
40            if (no == 0) {
41                image_name = "gazo-1.png";
42            } else if (no == 1) {
43                image_name = "gazo-2.png";
44            } else if (no == 2) {
45                image_name = "gazo-3.png";
46            } else if (no == 3) {
47                image_name = "gazo-4.png";
48            } else if (no == 4) {
49                image_name = "gazo-5.png";                
50            } else {
51                image_name = "gazo-6.png";
52            }
53        
54            document.getElementById("saisyo2").style["display"] = "none";
55            document.getElementById("kekka2").src = "images/" + image_name;
56            document.getElementById("kekka2").style["display"] = "inline";
57            document.getElementById("button2").src = "images/omikuji-btn-yarinaosu.png";
58        }
59        function play3 (){
60            var no = Math.floor(Math.random() * 6);
61
62            // ランダム値に応じて表示する画像を変える
63            var image_name;
64            if (no == 0) {
65                image_name = "gazo-1.png";
66            } else if (no == 1) {
67                image_name = "gazo-2.png";
68            } else if (no == 2) {
69                image_name = "gazo-3.png";
70            } else if (no == 3) {
71                image_name = "gazo-4.png";
72            } else if (no == 4) {
73                image_name = "gazo-5.png";                
74            } else {
75                image_name = "gazo-6.png";
76            }
77        
78            document.getElementById("saisyo3").style["display"] = "none";
79            document.getElementById("kekka3").src = "images/" + image_name;
80            document.getElementById("kekka3").style["display"] = "inline";
81            document.getElementById("button3").src = "images/omikuji-btn-yarinaosu.png";
82        }
83        function play4 (){
84            var no = Math.floor(Math.random() * 6);
85
86            // ランダム値に応じて表示する画像を変える
87            var image_name;
88            if (no == 0) {
89                image_name = "gazo-1.png";
90            } else if (no == 1) {
91                image_name = "gazo-2.png";
92            } else if (no == 2) {
93                image_name = "gazo-3.png";
94            } else if (no == 3) {
95                image_name = "gazo-4.png";
96            } else if (no == 4) {
97                image_name = "gazo-5.png";                
98            } else {
99                image_name = "gazo-6.png";
100            }
101        
102            document.getElementById("saisyo4").style["display"] = "none";
103            document.getElementById("kekka4").src = "images/" + image_name;
104            document.getElementById("kekka4").style["display"] = "inline";
105            document.getElementById("button4").src = "images/omikuji-btn-yarinaosu.png";
106        }
107    </script>
108
109    <style>
110        body {
111            background-image: url("images/omikuji-bg.png");
112            background-size: cover;
113            background-repeat: no-repeat;
114            margin: 0;
115            padding: 0;
116            text-align: center;
117        }
118        #hako {
119              -webkit-column-count: 4;
120              -moz-column-count: 4;
121              -ms-column-count: 4;
122              -o-column-count: 4;
123              column-count: 4;
124              -webkit-column-gap: 3px;
125              -moz-column-gap: 3px;
126              -ms-column-gap: 3px;
127              -o-column-gap: 3px;
128                 column-gap: 3px;
129              }
130
131              .img {
132                width: 100%;
133              }
134
135        #hako2 {
136              -webkit-column-count: 4;
137              -moz-column-count: 4;
138              -ms-column-count: 4;
139              -o-column-count: 4;
140              column-count: 4;
141              -webkit-column-gap: 3px;
142              -moz-column-gap: 3px;
143              -ms-column-gap: 3px;
144              -o-column-gap: 3px;
145              column-gap: 3px;
146                      }
147        
148        img {
149           width: 100%; 
150        }
151        #hako3 {
152              -webkit-column-count: 4;
153              -moz-column-count: 4;
154              -ms-column-count: 4;
155              -o-column-count: 4;
156              column-count: 4;
157              -webkit-column-gap: 3px;
158              -moz-column-gap: 3px;
159              -ms-column-gap: 3px;
160              -o-column-gap: 3px;
161              column-gap: 3px;
162                      }
163        
164        img {
165           width: 100%; 
166        }
167        #hako4 {
168              -webkit-column-count: 4;
169              -moz-column-count: 4;
170              -ms-column-count: 4;
171              -o-column-count: 4;
172              column-count: 4;
173              -webkit-column-gap: 3px;
174              -moz-column-gap: 3px;
175              -ms-column-gap: 3px;
176              -o-column-gap: 3px;
177              column-gap: 3px;
178                      }
179        
180        img {
181           width: 100%; 
182        }
183        #bottombar {
184            bottom: 30px;
185            width: 100%;
186        }
187    </style>
188</head>
189<body>
190    <div id="hako">
191        <img id="saisyo" src="images/gazo.png" />
192        <img id="kekka" style="display : none;"/>
193    </div>
194    <div id="hako2">
195        <img id="saisyo2" src="images/gazo.png" />
196        <img id="kekka2" style="display : none;"/>
197    </div>
198    <div id="hako3">
199        <img id="saisyo3" src="images/gazo.png" />
200        <img id="kekka3" style="display : none;"/>
201    </div>
202    <div id="hako4">
203        <img id="saisyo4" src="images/gazo.png" />
204        <img id="kekka4" style="display : none;"/>
205    </div>
206    <div id="bottombar">
207       <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="play();play2();play3();play4();">
208    </div>
209</body>
210</html>
211