【JavaScript初心者】JavaScriptでおみくじ作る方法

(function() {
 var btn = document.getElementById('btn');
 var output = document.getElementById('output');
 var overlay = document.getElementById('overlay');

btn.addEventListener('click', function() {
 result();
 overlay.classList.add('fadein');
 output.classList.add('fadein');
 });

overlay.addEventListener('click', function() {
 output.classList.remove('fadein');
 overlay.classList.remove('fadein');
 });

//＊おみくじ結果
 function result() {
 var omikekka = document.getElementById('omikekka');
 var index = Math.floor(Math.random() * 111);

if(0 <= index && index <= 9){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_daikichi.png" class="omikuji" />';
 }
 else if(10 <= index && index <= 29){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_kichi.png" class="omikuji" />';
 }
 else if(30 <= index && index <= 49){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_chuukichi.png" class="omikuji" />';
 }
 else if(50 <= index && index <= 69){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_syoukichi.png" class="omikuji" />';
 }
 else if(70 <= index && index <= 89){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_suekichi.png" class="omikuji" />';
 }
 else if(90 <= index && index <= 109){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_kyou.png" class="omikuji" />';
 }
 else if(110 <= index){
 omikekka.innerHTML = '<img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji_daikyou.png" class="omikuji" />';
 }

//＊ラッキーカラー
 var color = document.getElementById('color');
 var colornum = new Array('勿忘草色','真珠色','浅葱色','まつざきしげるいろ','潤朱','甕覗','紫紺','萌葱色');
 var num = Math.floor(Math.random() * colornum.length);
 console.log(num);
 color.innerHTML = 'ラッキーカラー:' + colornum[num];

//＊ラッキースポット
 var spot = document.getElementById('spot');
 var spotnum = new Array('思い思いの場所','例の場所','一度行ってみたかったところ','壱番魔晄炉','天空闘技場','暗黒武術会','東京タワー');
 var num = Math.floor(Math.random() * spotnum.length);
 spot.innerHTML = 'ラッキースポット:' + spotnum[num];

//＊ひとこと
 var hitokoto = document.getElementById('hitokoto');
 var hitokotonum = new Array('なんか良いことあるって！','意外となんとかなるんでない？','気にすんなって！','やるっきゃない！','そんな無理することかい？','みなぎっている！','あふれてるね！');
 var num = Math.floor(Math.random() * hitokotonum.length);
 hitokoto.innerHTML = '今日のひとこと:' + hitokotonum[num];
 }
})();

article.post-1809{
  background: linear-gradient(-90deg, #E0C2F9, #5AD8F2);
  background-size: 600% 600%;
  animation: AnimationName 10s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#wrapper {
  color: #333;
  text-align: center;
}

#btn {
  background: #F27398;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: 20px 60px;
  text-decoration: none;
}

#output {
  background: #fff;
  border-radius: 10px;
  color: #333;
  height: 70vh;
  /* line-height: 50vh; */
  overflow: scroll;
  position: absolute;
  top: 65%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 1000;
}

#overlay {
  background: rgba(0, 0, 0, .7);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

#output,
#overlay {
  opacity: 0;
  transition: all 0.5s;
  visibility: hidden;
}

#output.fadein,
#overlay.fadein {
  opacity: 1;
  visibility: visible;
}

.omikuji {
  max-width: 40%;
  margin: 0 auto;
}

.orei {
  font-size: 0.8em;
}

<div class="omikuji"><img src="/wp-content/themes/xeory_base-child/dev/dev_img/omikuji.png"></div>
 <div id="output">
 <div class="kekka">
 <p id="omikekka"></p></div>
 <p id="color"></p>
 <p id="spot"></p>
 <p id="hitokoto"></p>
 <p class="orei">Thank you for everything！</p>
 </div>
 <div class="btn"><p id="btn" onclick="gtag('event', 'click', {'event_category': '開発','event_label': 'おみくじ'});">ひく!</p></div> </div> <div id="overlay">
 </div>

<div class="kekka"><p id="omikekka"></p></div>
 <p id="color"></p>
 <p id="spot"></p>
 <p id="hitokoto"></p>
 <p class="orei">Thank you for everything！</p>

<?php if( is_page('1809') ) : //おみくじ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/dev/devjs.js" ></script>
<?php endif; ?>