选择座位时未定义为元素 id

Question

我正在使用 html 和 js 开发座位选择系统，并且正在使用 java 服务器页面。我已经编写了 onload 函数来为座位创建一些值

window.onload = function() {
    ...
    createSeats(oseattable, numseatsperrow, rownums);
    ...
}

然后我调用 createSeats 函数来创建座位。

function createSeats(oSeatsContainer, seatsPerRow, rowNums){
    var oRow = document.createElement('tr');
    oRow.appendChild(document.createElement('th'));
    oSeatsContainer.appendChild(oRow);
    var seatClass = (document.getElementById('class')=="Economy")?1:11;
    for (i = 0; i < rowNums; i++) {
        var oRow = document.createElement('tr');
        for (j = 0; j < seatsPerRow; j++) {
            var oCell = document.createElement('td');
            var oImg = document.createElement('img');
            oImg.src = statusPics['avail'].src;
            oImg.status = 'avail';
            oImg.id = seatClass + j + (i*seatsPerRow);
            for (c=0; c < dis.length; c++) {
                var x = dis[c];
                if (seatClass + j == x) {
                    oImg.src = statusPics['unavail'].src;
                    oImg.status = 'taken';
                    oImg.id = seatClass + j + (i*seatsPerRow);
                }
            }
            oImg.onclick = function() {
                if (this.status != 'taken') {
                    this.status = (this.status == 'avail') ? 'mine'
                            : 'avail';
                    this.src = (this.status == 'avail') ? statusPics['avail'].src
                            : statusPics['mine'].src;
                }
            }
            oCell.appendChild(oImg);
            oRow.appendChild(oCell);
        }
        oSeatsContainer.appendChild(oRow);
    }
}

我得到了我想要的座位布局

然后我选择两个座位并单击确认选项，然后它将显示选定的座位号和总价格。 当我选择前两个座位时，我得到正确的座位号，

但是当我选择两个随机座位时，我得到“未定义”作为元素 ID

这是确认选择功能，

function confirmChoices() {
    seatsSelected = new Array();
    var strBookedSeats = '';
    for (i = 0; i < oseats.length; i++) {
        if (oseats[i].status == 'mine') {
            seatsSelected.push(oseats[i].id);
            oseats[i].src = statusPics['taken'].src
            if(strBookedSeats=='')
                strBookedSeats += seatsSelected[i];
            else
            strBookedSeats += ',' + seatsSelected[i];
        }
    }
    var totalPrice = seatsSelected.length * seatPrice;
    oBookedSeatNos.innerHTML = strBookedSeats;
    oBooked.value = strBookedSeats;
    oTotalprice.value = totalPrice;
    oDispPrice.innerHTML = totalPrice;
    oBtnBookSeats.disabled = (seatsSelected.length == seatstobebooked) ? false: true;
}

我做错了什么？如何纠正这个问题？

提前致谢！

Answer 1

您尝试遍历“seatsSelected[i];”的小数组使用更大的 'oseats' 数组的索引，'i'。这会导致访问时不存在的条目。

尝试更正数组的使用，然后它应该可以正常工作。

我评论了你的代码以澄清

function confirmChoices() {

  // array in which you add your 'seats selected seats'
  seatsSelected = new Array();
  var strBookedSeats = '';

  for (i = 0; i < oseats.length; i++) {
    //the oseats array might be quite large for example at the fourth seat you check 'i' will be 3.

    if (oseats[i].status == 'mine') {
      // just if the status is 'mine' the id of entry will be pushed to the array.
      seatsSelected.push(oseats[i].id);
      oseats[i].src = statusPics['taken'].src

      //this works for the first seat as 'i' starts at 0.
      // if you change the ID to be used from the oseats array this should work.
      if (strBookedSeats == '')
          //changed seatsSelected[i] with oseats[i].id
        strBookedSeats += oseats[i].id;
      else
          //changed seatsSelected[i] with oseats[i].id
        strBookedSeats += ',' + oseats[i].id;
    }
  }
  var totalPrice = seatsSelected.length * seatPrice;
  oBookedSeatNos.innerHTML = strBookedSeats;
  oBooked.value = strBookedSeats;
  oTotalprice.value = totalPrice;
  oDispPrice.innerHTML = totalPrice;
  oBtnBookSeats.disabled = (seatsSelected.length == seatstobebooked) ? false : true;
}

Answer 2

由于将值推入数组，您得到了错误的答案。在 confirmChoices 函数中删除数组。

function confirmChoices() {
        var strBookedSeats = '';
        var count = 0;
        for (i = 0; i < oseats.length; i++) {
            if (oseats[i].status == 'mine') {
                count++;
                console.log("After: "+oseats[i].id);
                oseats[i].src = statusPics['taken'].src
                if(strBookedSeats=='')
                    strBookedSeats += oseats[i].id;
                else
                strBookedSeats += ',' + oseats[i].id;
            }
        }
        var totalPrice = count * seatPrice;
        oBookedSeatNos.innerHTML = strBookedSeats;
        oBooked.value = strBookedSeats;
        oTotalprice.value = totalPrice;
        oDispPrice.innerHTML = totalPrice;
        oBtnBookSeats.disabled = (count == seatstobebooked) ? false: true;
    }