Amazon web services MTurk上预览页面和点击页面之间的奇怪差异

我正在尝试使用基本的多页导航器创建一个MTurk任务 用Javascript编写。我离线测试过，一切正常 好的我把代码放到了MTurk上，在预览页面上，所有的东西都是 工作然而，当我试图创建一批作业时，工人的观点 即使使用完全相同的代码，也不会显示导航栏（请参见 附加屏幕截图）

我还附上了我的代码以供参考

<!-- You must include this JavaScript file -->
<!--<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>-->

<style>

.pagination {
  margin-top: 18px;
  font-size: 0;
  text-align: center; 
}
.pagination .page-li {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}
.pagination .page-li:hover {
      cursor: pointer;
      background-color: #EAEAEA; }

.pagination .page-li.page-active {
      cursor: default;
      color: #fff;
      border-color: #555555;
      background-color: #555555; 
}

.pagination .page-li.number-ellipsis {
      border: none;
      cursor: default; 
}

.pagination .page-li.number-ellipsis:hover {
        background-color: #fff; }

.pagination .page-number {
    width: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #EAEAEA;
    text-align: center; 
}

.pagination .page-prev {
    padding: 8px 14px;
    margin-right: 8px;
    border: 1px solid #EAEAEA; 
}

.pagination .page-prev.no-prev {
    color: #c6c6c6; 
}

.pagination .page-prev.no-prev:hover {
    cursor: default;
    background-color: #fff; 
}

.pagination .page-next {
    padding: 8px 14px;
    margin-left: 8px;
    border: 1px solid #EAEAEA; 

}
.pagination .page-next.no-next {
      color: #c6c6c6; 

}

.pagination .page-next.no-next:hover {
        cursor: default;
        background-color: #fff; 
}

.pagination .number-ellipsis {
    display: inline-block;
    font-size: 15px;
    padding: 8px 14px; 
}
.pagination .number-ellipsis.page-hidden {
      display: none;
}

</style>

<!--<crowd-form answer-format="flatten-objects" >-->
    <div>

    <p><b>Question: </b> </p>

        <input type="radio" name='choice-x' value="y">  <label> Yes </label>
        <br>
        <input type="radio" name='choice-x' value="n"> <label> No </label>

    </div>

    <div class="box"> random </div> 
<!--</crowd-form>-->


<script type="text/javascript">

class SimplePagination {
  constructor (totalPageCount) {
    if (!totalPageCount) return
    this.state = {
      pageNumber: 1,
      totalPageCount
    }
  }

  init (paramsObj) {
    let state = this.state
    state.container = paramsObj.container || 'body'
    state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5
    state.pCName = paramsObj.pCName || 'page-li',
    state.activeCName = paramsObj.activeCName || 'page-active',
    state.dataNumberAttr = paramsObj.dataNumberAttr || 'data-number',
    state.prevCName = paramsObj.prevCName || 'page-prev',
    state.nextCName = paramsObj.nextCName || 'page-next',
    state.disbalePrevCName = paramsObj.disbalePrevCName || 'no-prev',
    state.disbaleNextCName = paramsObj.disbaleNextCName || 'no-next',
    state.pageNumberCName = paramsObj.pageNumberCName || 'page-number'
    state.swEvent = paramsObj.swEvent || 'click'
    state.onPageChange = paramsObj.onPageChange
    state.totalPageCount > state.maxShowBtnCount + 2 && (state.activePosition = Math.ceil(state.maxShowBtnCount / 2))
    this.renderPageDOM()
  }

  switchPage () {
    let state = this.state
    let pCNameList = this.selectorEle('.' + state.pCName, true)
    let pageNumber
    pCNameList.forEach(item => {
      item.addEventListener(state.swEvent, e => {
        const currentPageEle = e.target
        if (this.hasClass(currentPageEle, state.activeCName)) return
        let dataNumberAttr = currentPageEle.getAttribute(state.dataNumberAttr)
        if (dataNumberAttr) {
          pageNumber = +dataNumberAttr
        } else if (this.hasClass(currentPageEle, state.prevCName)) {
          state.pageNumber > 1 && (pageNumber = state.pageNumber - 1)
        } else if (this.hasClass(currentPageEle, state.nextCName)) {
         state.pageNumber < state.totalPageCount && (pageNumber = state.pageNumber + 1)
        }
        pageNumber && this.gotoPage(pageNumber)
      })
    })
  }
  gotoPage (pageNumber) {
    let state = this.state
    let evaNumberLi = this.selectorEle('.' + state.pageNumberCName, true)
    let len = evaNumberLi.length
    if (!len || this.isIllegal(pageNumber)) return
    this.removeClass(this.selectorEle(`.${state.pCName}.${state.activeCName}`), state.activeCName)
    if (state.activePosition) {
      let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1
      if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
        if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
          for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
            evaNumberLi[i].innerText = i + 1
            evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1)
          }
        }
        this.hiddenEllipse('.ellipsis-head')
        this.hiddenEllipse('.ellipsis-tail', false)
        this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
      }
      if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
        this.hiddenEllipse('.ellipsis-head', pageNumber === 2 && state.maxShowBtnCount === 1)
        this.hiddenEllipse('.ellipsis-tail', false)
        for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
          evaNumberLi[i].innerText = pageNumber + (i - state.activePosition)
          evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
        }
        this.addClass(evaNumberLi[state.activePosition], state.activeCName)
      }
      if (pageNumber >= rEllipseSign) {
        this.hiddenEllipse('.ellipsis-tail')
        this.hiddenEllipse('.ellipsis-head', false)
        if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
          for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
            evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1
            evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
          }
        }
        this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName)
      }
    } else {
      this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
    }
    state.pageNumber = pageNumber
    state.onPageChange && state.onPageChange(state)
    this.switchPrevNextAble()

    var inputElems = document.getElementsByTagName("input");
    for (var i=inputElems.length-1; i>=0; --i) {
        var elem = inputElems[i];
        if ((elem.type || "").toLowerCase() == "radio" && elem.name.startsWith("choice")) {
            elem.name = "choice-" + pageNumber.toString();

        }
    }


  }

  switchPrevNextAble () {
    let state = this.state
    let prevBtn = this.selectorEle('.' + state.prevCName)
    let nextBtn = this.selectorEle('.' + state.nextCName)
    state.pageNumber > 1
      ? (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName))
      : (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName))
    state.pageNumber >= state.totalPageCount
      ? (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName))
      : (this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName))
  }

  renderPageDOM () {
    let state = this.state
    let pageContainer = this.selectorEle(state.container)
    if (!pageContainer) return
    let { totalPageCount, pCName, prevCName, disbalePrevCName, pageNumberCName,
      activeCName, dataNumberAttr, maxShowBtnCount,nextCName, disbaleNextCName } = state
    let paginationStr = `
    <ul id="pagination" class="pagination">
    <br>
    <li class="${pCName} ${prevCName} ${disbalePrevCName}">prev</li>
    <li class="${pCName} ${pageNumberCName} ${activeCName}" ${dataNumberAttr}='1'>1</li>
    `
    if (totalPageCount - 2 > maxShowBtnCount) {
      paginationStr += `
      <li class="${pCName} number-ellipsis ellipsis-head" style="display: none;">...</li>`
      for (let i = 2; i < maxShowBtnCount + 2; i++) {
        paginationStr += `<li class="${pCName} ${pageNumberCName} ${i === 1 ? activeCName : ''}" ${dataNumberAttr}='${i}'>${i}</li>`
      }
      paginationStr += `
      <li class="${pCName} number-ellipsis ellipsis-tail">...</li>
      <li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${totalPageCount}'>${totalPageCount}</li>
      `
    } else {
      for (let i = 2; i <= totalPageCount; i++) {
        paginationStr += `<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${i}'>${i}</li>`
      }
    }
    paginationStr += `<li class="${pCName} ${nextCName}${totalPageCount === 1 ? ' ' + disbaleNextCName : ''}">next</li></ul>`
    pageContainer.innerHTML = paginationStr
    this.switchPage()
  }

  isIllegal (pageNumber) {
    let state = this.state
    return (
      state.pageNumber === pageNumber || Math.ceil(pageNumber) !== pageNumber ||
      pageNumber > state.totalPageCount || pageNumber < 1 ||
      typeof pageNumber !== 'number' || pageNumber !== pageNumber
    )
  }

  hiddenEllipse (selector, shouldHidden = true) {
    this.selectorEle(selector).style.display = shouldHidden ? 'none' : ''
  }

  selectorEle (selector, all = false) {
    return all ? document.querySelectorAll(selector) : document.querySelector(selector)
  }

  hasClass (eleObj, className) {
    return eleObj.classList.contains(className);
  }

  addClass (eleObj, className) {
      eleObj.classList.add(className);
  }

  removeClass (eleObj, className) {
    if (this.hasClass(eleObj, className)) {
        eleObj.classList.remove(className);
    }
  }
}
console.log('running slp')
const slp = new SimplePagination(12)
console.log(slp)
slp.init({
    container: '.box',
    maxShowBtnCount: 3,
    onPageChange: state => {console.log('pagination change:', state.pageNumber)}
})


</script>

.分页{
边缘顶部：18px；
字号：0；
文本对齐：居中；
}
.pagination.page li{
显示：内联块；
字体大小：15px；
线高：1；
-ms用户选择：无；
-moz用户选择：无；
-webkit用户选择：无；
用户选择：无；
}
.分页。第li页：悬停{
光标：指针；
背景色：#EAEAEA；}
.pagination.page-li.page-active{
游标：默认值；
颜色：#fff；
边框颜色：#555555；
背景色：#555555；
}
.pagination.page-li.number-省略号{
边界：无；
游标：默认值；
}
.pagination.page li.编号省略号：悬停{
背景色：#fff；}
.页码.页码{
宽度：38px；
填充顶部：8px；
垫底：8px；
边框：1px实心#EAEAEA；
文本对齐：居中；
}
.分页.上一页{
填充：8px 14px；
右边距：8px；
边框：1px实心#EAEAEA；
}
.分页。第页-上一页。第号-上一页{
颜色：#C6；
}
.pagination.page prev.no prev:悬停{
游标：默认值；
背景色：#fff；
}
.分页。下一页{
填充：8px 14px；
左边距：8px；
边框：1px实心#EAEAEA；
}
.pagination.page-next.no-next{
颜色：#C6；
}
.分页.下一页.无下一页：悬停{
游标：默认值；
背景色：#fff；
}
.分页.数字省略号{
显示：内联块；
字体大小：15px；
填充：8px 14px；
}
.pagination.number-省略号.page-hidden{
显示：无；
}
问题:

对


不
随机的
类简单化{
构造函数（totalPageCount）{
如果（！totalPageCount）返回
此.state={
页码：1，
总页数
}
}
init（paramsObj）{
让state=this.state
state.container=paramsObj.container | |“body”
state.maxShowBtnCount=paramsObj.maxShowBtnCount | | 5
state.pCName=paramsObj.pCName | | |“page li”，
state.activeCName=paramsObj.activeCName | |“页面处于活动状态”，
state.datanumberratter=paramsObj.datanumberratter | | |“数据编号”，
state.prevCName=paramsObj.prevCName | | |“page prev”，
state.nextCName=paramsObj.nextCName | | |“下一页”，
state.disableprevcname=paramsObj.disableprevcname | | |“无prev”，
state.disballenextcname=paramsObj.disballenextcname | | |“无下一个”，
state.pageNumberCName=paramsObj.pageNumberCName | | |“页码”
state.swEvent=paramsObj.swEvent | | |“单击”
state.onPageChange=paramsObj.onPageChange
state.totalPageCount>state.maxShowBtnCount+2&&（state.activePosition=Math.ceil（state.maxShowBtnCount/2））
this.renderPageDOM（）
}
切换页（）{
让state=this.state
让pCNameList=this.selectorEle（'.'+state.pCName，true）
请输入页码
pCNameList.forEach（项目=>{
item.addEventListener（state.swEvent，e=>{
常数currentPageEle=e.target
if（this.hasClass（currentPageEle，state.activeCName））返回
让DataNumberRatter=currentPageEle.getAttribute（state.DataNumberRatter）
如果（数据编号）{
页码=+数据编号
}else if（this.hasClass（currentPageEle，state.prevCName））{
state.pageNumber>1&（pageNumber=state.pageNumber-1）
}else if（this.hasClass（currentPageEle，state.nextCName））{
state.pageNumberstate.maxShowBtnCount&&pageNumber=重新签名）{
this.hiddenEllipse（“.Ellipsia tail”）
this.hiddenEllipse（'.Ellipsia head'，false）
if（+evaNumberLi[len-2].getAttribute（state.datanumberratter）