[Javascript]利用隨機亂數，製作簡單的抽籤

大家是否有因為有太多選擇而不知道怎麼選擇而感到困擾。這時候會不會想要透過抽籤方式決定。

真實事件，下面是時常發生的對話：

同事A問同事B：中午到了，要吃什麼?

同事B：不知道耶，問某某。

某某：我也不知道耶，問rzhz94。

rzhz94：我也不知道....。

大家就鬼打牆的不知道要吃啥。

..............

這種情況實在太常發生了。因為大家已經對公司附近的食物店家無感。但又必須止飢。所以我想做個簡單的抽籤系統。不知道要什麼，就抽籤決定吧！

構想：一個輸入抽籤項目的文字輸入框、一個增加項目的按鈕、顯示抽籤項目、抽籤按鈕、顯示中籤項目。

使用語法：HTML、CSS、Javascript

版面配置：HTML、CSS

因為只是希望簡單方便好操作，不求酷炫。所以簡單安排版面後，(CSS不是重點，就不貼了。)

HTML：

<div class="div_class_content">
  <div class="div_class_border_box">
    <div class="div_class_items">
      <input type="text" id="ip_enter_item" placeholder="Add Item...">
      <button id="mybtn" onclick="enterbtn()">ADD</button>
    </div>
    <div class="div_class_items">
      <label>抽籤選手有：</label>
      <label id="myitem">顯示</label>
    </div>
    <div class="div_class_items">

      <button id="mybtn2" onclick="randombtn()">GO!</button>
    </div>

    <div class="div_class_items">
      <label>獲勝選手：</label>
      <label id="result"></label>
    </div>
  </div>
</div>

開始注入靈魂：Javascript

我的寫法是：

1. 一開始已經有在陣列加入常用項目。

var myarr = [
  "肯德基",
  "麥當勞",
  "斜坡早餐店",
  "水餃早餐店",
  "能量小姐",

];
var myenteritem = document.getElementById("ip_enter_item");
var mybtn = document.getElementById("mybtn");
var myrandom = document.getElementById("mybtn2");
var myitem = document.getElementById("myitem");
myitem.innerHTML = myarr;
var myresult = document.getElementById("result");

2. function enterbtn()將新增項目存取至陣列

function enterbtn() {
  if(myenteritem.innerHTML!=""){
      myarr.push(myenteritem.value);
  myitem.innerHTML = myarr;
  }else{
    alert("Please enter the item!");
  }

}

3. function randombtn()獲取陣列長度後，使用隨機random()來達到隨機取值目的

function randombtn() {
  for (var i = 0; i <= myarr.length; i++) {
    myresult.innerHTML = myarr[Math.floor(Math.random() * myarr.length)];
  }
}

完整的Code可以到我的CodePen參考。 若有錯誤的地方還請多多指教。

參考資料：

JavaScript Array（数组） 对象

JavaScript random() 方法