“未捕获的 TypeError：席位 [Symbol.iterator] 不是函数”是什么意思？答案

【问题标题】：What does "Uncaught TypeError: seats[Symbol.iterator] is not a function" mean?“未捕获的 TypeError：席位 [Symbol.iterator] 不是函数”是什么意思？
【发布时间】：2020-06-01 13:52:54
【问题描述】：

我正在制作一个电影座位预订应用程序。但是当我运行代码时，我得到一个错误。谷歌控制台说错误在第 224 行，错误是“Uncaught TypeError: seat[Symbol.iterator] is not a function。

这是什么意思？为什么会这样？

Here is my codepen link to the source code

这是实际的代码：

<html>

<head>
  <title>Tommy's movie seat booking app</title>
  <style>
    * {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
    }
    
    body {
      background-color: black;
      outline: 0;
      display: flex;
      flex-direction: column;
      color: white;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }
    
    #movie-container {
      margin: 20px 0;
    }
    
    #movie-container select {
      background-color: white;
      border: 0;
      outline: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 15px;
      margin-left: 10px;
      padding: 5px 15px;
    }
    
    .seat {
      background-color: grey;
      width: 15px;
      height: 12px;
      margin: 5px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    
    .seat.selected {
      background-color: #00e1ff;
    }
    
    .seat.occupied {
      background-color: white;
    }
    
    .seat:nth-of-type(2) {
      margin-right: 20px;
    }
    
    .seat:nth-last-of-type(2) {
      margin-left: 20px;
    }
    
    #not1:hover {
      cursor: default;
      transform: scale(1);
    }
    
    #not2:hover {
      cursor: default;
      transform: scale(1);
    }
    
    .seat:not(.occupied):hover {
      cursor: pointer;
      transform: scale(1.3);
    }
    
    #not2 {
      margin-right: 1%;
    }
    
    .show-case {
      background-color: rgba(17, 0, 255, 0.1);
      padding: 5px 10px;
      border-radius: 10px;
      list-style-type: none;
      display: flex;
      justify-content: space-between;
    }
    
    .show-case li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
    }
    
    .show-case li small {
      margin-left: 5px;
    }
    
    .screen {
      background-color: white;
      height: 70px;
      width: 100%;
      margin: 15px 0;
      transform: rotateX(-45deg);
      box-shadow: 0 3px 10px rgba(255, 225, 225, 0.7);
    }
    
    .row {
      display: flex;
    }
    
    #container {
      margin-left: 2%;
      perspective: 700px;
      margin-bottom: 30px;
    }
    
    #count,
    #total {
      color: rgb(255, 230, 0)
    }
  </style>
</head>

<body>
  <div id="movie-container">
    <label>Pick a movie</label>
    <select id="movieName">
      <option value="10">Gone with the Wind ($10)</option>
      <option value="12">The Sound of Music ($12)</option>
      <option value="14">E.T. the Extra-Terrestrial ($14)</option>
      <option value="17">Titanic ($17)</option>
      <option value="20">The Ten Commandments ($20)</option>
      <option value="21">Jaws ($21)</option>
      <option value="24">Doctor Zhivago ($24)</option>
      <option value="28">The Exorcist ($28)</option>
      <option value="29">Snow White and the Seven Dwarfs ($29)</option>
      <option value="32">Avengers: Endgame ($32)</option>
      <option value="44">Star Wars ($44)</option>
    </select>
  </div>
  <div class="show-case">
    <ul>
      <li>
        <div class="seat" id="not1"></div>
        <small>Available</small>
        <div class="seat selected" id="not2"></div>
        <small>Selected</small>
        <div class="seat occupied"></div>
        <small>Occupied</small>
      </li>
    </ul>
  </div>
  <div id="container">
    <div class="screen"></div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
    </div>
  </div>
  <p>You have selected <span id="count">0</span> <span id="s">seats</span> for the price of $<span id="total">0</span>.</p>
  <script>
    const container = document.getElementById("container");
    const seats = document.getElementsByClassName(".row .seat:not(.occupied)");
    const count = document.getElementById("count");
    const total = document.getElementById("total");
    const s = document.getElementById("s");
    const selectMovie = document.getElementById("movie-name");
    let ticketPrice = +movieName.value;

    function update() {
      const selectedSeats = document.getElementsByClassName("seat selected");
      const selectedSeatsCount = selectedSeats.length - 1;
      count.innerText = selectedSeatsCount;
      total.innerText = selectedSeatsCount * ticketPrice;
      if (count === "1") {
        s.innerText = "seat";
      } else {
        s.innerText = "seats";
      }
      const seatsIndex = [...selectedSeats].map(function(seats) {
        return [...seats].indexOf(seat);
      })
      console.log(seatsIndex);
    }

    movieName.addEventListener("change", function(e) {
      ticketPrice = +e.target.value;
      update();
    })

    container.addEventListener("click", function(e) {
      if (e.target.classList.contains("seat") && !e.target.classList.contains("occupied")) {
        e.target.classList.toggle("selected");
        update();
      }
    })
  </script>
</body>

</html>

【问题讨论】：

这能回答你的问题吗？ Symbol.iterator is not a function
这意味着当您尝试在[...seats] 中使用seats 时，它是不可迭代的（例如数组）。 Tbh，我无法理解该代码试图做什么，所以我无法提出修复建议。

标签： javascript html

【解决方案1】：

您的错误在这部分：

const seatsIndex = [...selectedSeats].map(function (seats) {
  return [...seats].indexOf(seat);
});

您将map 中selectedSeats 的每个元素命名为seats，这在上述范围内隐藏了seats。

另外，还有一个错误，那就是seat is not defined。我想你可能打算这样做：

const seatsIndex = [...selectedSeats].map(function (seat) {
  return [...seats].indexOf(seat);
});

【讨论】：

它没有用。当我选择座位时，我只会得到一堆 -1

【解决方案2】：

哦，我刚刚想通了！我使用了这段代码：

const seatsIndex = [...selectedSeats].map(function(seats) {
  return [...seats].indexOf(seat);
})

但是，我应该给每个座位一个名字，然后使用这段代码：

let seatsIndex = [...selectedSeats].map(function (seat) {
  return seat.getAttribute("name");
});
seatsIndex.shift();

【讨论】：