Question

我有两个用于定价的模式按钮，一个用于较低的价格，另一个用于较高的价格。
如果有人为较低的产品付款。下方的模式按钮消失，但他/她仍然可以看到上方的模式按钮。
如果有人为更高的产品付款，则两个模式按钮都会消失。
现在，如果用户根本不付款，他/她可以看到两个模式按钮，并且按照我目前的编码，两个模式都可以正常工作。

var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');

var btn = document.getElementById("modalbutton");
var btn2 = document.getElementById("modalbutton2");

var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close2")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
 btn2.onclick = function() {
    modal2.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}
span2.onclick = function() {
    modal2.style.display = "none";
}

HTML: 

<button class="btn btn-default" id="modalbutton">Purchase low</button>
   <button class="btn btn-default" id="modalbutton2">Purchase high</button>

问题：

当用户为低价付款时，低价按钮消失，但高价的模式按钮仍然保留。但是，单击它时模态不会打开。
错误：

未捕获到的TypeError：无法在

上将null的属性“ onclick”设置为

btn.onclick = function() {
      modal.style.display = "block";
    }

为什么要使用btn而不直接使用btn2。我该如何纠正。谢谢。

Answer 1

我想我找到了处理null的答案。所以我放了一张支票，

if (btn !== null){
  btn.onclick = function() {
  modal.style.display = "block";
 }
}else{
  btn2.onclick = function() {
  modal2.style.display = "block";
 }
}

模式将打开。之后，单击关闭事件，它显示错误。说明低按钮未定义。所以我也放了一张支票

if (span !== undefined){
 span.onclick = function() {
 modal.style.display = "none";
 }
}else{
 span2.onclick = function() {
 modal2.style.display = "none";
 }
}

这是某种错误处理。如果有人有更好的方法来解决这个问题。请分享。

如果由于代码限制而使两个模态按钮之一消失，则模态不起作用

1 个答案: