选择座位时将未定义为元素ID

时间:2018-06-18 06:47:30

标签: javascript html jsp

我正在使用html和js& amp;我使用的是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);
    }
}

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

然后我选择两个座位并点击确认选项,然后它会显示所选座位号和总价。 当我选择前两个座位时,我得到的座位号是正确的, first two seats

但是当我选择两个随机座位时,我会得到“未定义的”#39;作为元素id random seats random seats

这里是确认选择功能,

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;
}

我做错了什么?如何纠正这个?

提前致谢!

2 个答案:

答案 0 :(得分:2)

你试图循环遍历小阵列的座位选择[i];&#39;使用更大数量的&#39; oseats&#39; ,&#39;我&#39;。这导致在访问时不存在的条目。

尝试纠正数组使用情况,然后它应该可以正常工作。

我评论了您的代码以澄清

&#13;
&#13;
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;
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

由于将值推入数组,您得到了错误的答案。删除 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;
    }