时间戳

首页 > 解决方案 > 满足要求后按钮可见

javascript - 满足要求后按钮可见

问题描述

要求：当点击多个按钮时，用户将能够点击“继续按钮”。

当前情况：我正在制作一个电影院网页。用户将可以选择他们喜欢的座位。选择座位后，他们将能够单击“继续按钮”进行支付。但是，我很难实现这个功能。我知道我需要使用可见性隐藏功能。

以下是我的代码：

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
    if (this.classList.contains("active")) {
      count++;
      if (this.classList.contains("active") > 1) {
        function proceedButton() {
          document.getElementById("pButton").style.display = "visible";
        }
      } else {
        document.getElementById("pButton").style.display = "block";
      }

    } else {
      count--;
    }
    disp.innerHTML = count;
  })
}

function proceedButton() {
  var x = document.getElementById("payment-section");
  if (x.style.display === "none") {
    x.style.display = "block";
  }
}
.button {
  background-color: #423F3E;
  height: 30px;
  width: 30px;
  margin: 5px;
  border-radius: 10px;
  border: none;
  float: left;
}

.button.active {
  background-color: #F7EA00 !important;
}
<div class="seats-layout">
  <div class="row">
    <input type="button" id="button1" class="button" />
    <input type="button" id="button2" class="button" />
    <input type="button" id="button3" class="button" />
  </div>
  <div class="row">
    <input type="button" id="button1" class="button" />
    <input type="button" id="button2" class="button" />
    <input type="button" id="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>
```

标签： javascripthtmlcss

解决方案

演示页面

使用document.querySelectorAll将文档中与指定 CSS 选择器匹配的所有元素作为静态 NodeList 对象返回。

function proceedButton() {
  var x = document.getElementById("payment-section");
  var item_click = document.querySelectorAll('.active').length;
  if (item_click>1) {
    x.style.display = "block";
  }else{
    x.style.display = "none";
  }
}

推荐阅读