這樣做就沒有了動畫抽獎的畫面了

https://codepen.io/makzan/pen/WbeXRq

參考~我把值放到文字欄位~你可以用隱藏欄位紀錄後送出~

HTML

<ul id='slideshow'>
  <li txt="Mak Ka Veng"><img src='https://via.placeholder.com/500x200&text=Mak Ka Veng' alt=''></li>
  <li txt="Ho Kit Zi"><img src='https://via.placeholder.com/500x200&text=Ho Kit Zi' alt=''></li>
  <li txt="Aaden Chan"><img src='https://via.placeholder.com/500x200&text=Aaden Chan' alt=''></li>
  <li txt="Kin Ho"><img src='https://via.placeholder.com/500x200&text=Kin Ho' alt=''></li>
  <li txt="Johnson Lam"><img src='https://via.placeholder.com/500x200&text=Johnson Lam' alt=''></li>
  <li txt="Simon Leong"><img src='https://via.placeholder.com/500x200&text=Simon Leong' alt=''></li>
  <li txt="Veng Mak"><img src='https://via.placeholder.com/500x200&text=Veng Mak' alt=''></li>
  <li txt="Victor Vong"><img src='https://via.placeholder.com/500x200&text=Victor Vong' alt=''></li>
</ul>
<input type="text" id="Str" name="Str">
<button id='again'>Again :-)</button>

CSS

/* reset */
body, ul, li, p, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}

/* slideshow */

ul {
  width: 400px;
  height: 200px;
  
  margin: 0 auto;
  
  position: relative;
  
  list-style: none;
  
  -webkit-perspective: 700px;
  perspective: 700px;
}

li {
  position: absolute;  
  
  transform-origin: 0 100%;
}
li.current {
  transition: all 0.4s ease-out;
  opacity: 1.0;
}
li.in {
  opacity: 0.0;
  transform: rotate3d(1, 0, 0, -90deg);
}
li.out {
  transition: all 0.4s ease-out;
  opacity: 0.0;
  transform: rotate3d(1, 0, 0, 90deg);
}

JS

var slides = $('#slideshow').find('li');


// move all to the right.
slides.addClass('in');

// move first one to current.
$(slides[0]).removeClass().addClass('current');

var currentIndex = 0;
  
var minimumCount = 20;
var maximumCount = 200;
var count = 0;

function nextSlide() {
  $('#again').attr('disabled','disabled');
  
  currentIndex += 1;
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  
  // move any previous 'out' slide to the right side.
  $('.out').removeClass().addClass('in');
  
  // move current to left.
  $('.current').removeClass().addClass('out');
  
  // move next one to current.
  $(slides[currentIndex]).removeClass().addClass('current');
  
  
  count += 1;
  if (count > maximumCount || (count > minimumCount && Math.random()>0.3) ) {
    clearInterval(interval);
    var Str = document.getElementById("Str");
    Str.value = slides[currentIndex].getAttribute("txt");
    $('#again').removeAttr('disabled');
  }
}

var interval = setInterval(nextSlide, 120);


$('#again').click(function(){  
  count = 0;
  interval = setInterval(nextSlide, 120);
});

謝謝師兄的熱心幫助.

他要表現特效的話一定得用ajax去做post，要不然畫面一刷新什麼特效都是白費功夫，我是覺得用不用select沒啥關係啦，都得寫js了那應該沒啥差別。

另外抽獎在設計的話前端通常只負責跑特效而已，post大概只送人員驗證的資料，真正抽的話是在後端抽，前端收到等特效跑完後固定在得獎人而已。

所以其實沒什麼會用到 getElementById 的問題，抽獎結果本來就該在後端產生了。

恩~通常特效都是後端帶結果到前端~
前端不可以產生結果後才送去後端(作弊)