影院选座页选中座位后显示proceed-button的功能实现问题

原代码存在的问题 #

• 逻辑判断错误：this.classList.contains("active")返回布尔值，无法直接和数字1比较，应该使用统计选中数量的count变量做判断
• 重复声明proceedButton函数，点击事件内部声明的函数从未被调用，控制按钮显示的逻辑完全未生效
• CSS属性混用：display属性没有visible取值，你需要的visibility属性对应值才是hidden/visible
• 初始状态下proceed按钮没有默认隐藏，不符合未选座时不可点击的要求

修正后代码 #

JS代码 #

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
var pButton = document.getElementById("pButton");

// 初始化隐藏proceed按钮
pButton.style.visibility = "hidden";

for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.toggle('active');
    if (this.classList.contains("active")) {
      count++;
    } else {
      count--;
    }
    // 根据选中数量控制proceed按钮显示，选中超过1个（≥2）时显示
    pButton.style.visibility = count > 1 ? "visible" : "hidden";
    disp.innerHTML = count;
  })
}

function proceedButton() {
  var x = document.getElementById("payment-section");
  if (x.style.display === "none") {
    x.style.display = "block";
  }
}

CSS代码 #

.button {
  background-color: #423F3E;
  height: 30px;
  width: 30px;
  margin: 5px;
  border-radius: 10px;
  border: none;
  float: left;
}

.button.active {
  background-color: #F7EA00 !important;
}

/* 可选：隐藏状态下禁止按钮响应点击，避免用户误触 */
.proceed-button[style*="visibility: hidden"] {
  pointer-events: none;
}

HTML代码（修正了重复ID问题，原有结构不变） #

<div class="seats-layout">
  <div class="row">
    <input type="button" id="row1-button1" class="button" />
    <input type="button" id="row1-button2" class="button" />
    <input type="button" id="row1-button3" class="button" />
  </div>
  <div class="row">
    <input type="button" id="row2-button1" class="button" />
    <input type="button" id="row2-button2" class="button" />
    <input type="button" id="row2-button3" class="button" />
  </div>
</div>
<p> Button Clicked <span id="display">0</span> Times</p>
<input type="submit" value="Proceed" onclick="proceedButton()" id="pButton" class="proceed-button" />
<div id="payment-section" style="display: none">
<h1>Payment</h1>
</div>

内容的提问来源于stack exchange，提问作者user15423620