Randomly display food options on a webpage

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>版本6 - 文字閃爍抽籤</title>
<style>
  #result { font-size: 2em; margin: 20px; }
  button { padding: 10px 20px; }
</style>
</head>
<body>
  <h2>今天中午吃什麼？</h2>
  <div id="result">？？？</div>
  <button onclick="draw()">開始抽籤</button>

<script>
const foods = ["壽司","牛排","滷肉飯","火鍋","拉麵"];

function draw() {
  let counter = 0;
  const interval = setInterval(() => {
    // 每次隨機顯示一個餐點
    const pick = foods[Math.floor(Math.random() * foods.length)];
    document.getElementById("result").innerText = pick;
    counter++;
    if (counter > 10) clearInterval(interval); // 1秒後停止
  }, 100); // 每0.1秒切換
}
</script>
</body>
</html>