I'm creating two modals. One for buying, and the other for selling. However, when I click on the span in the modal which is supposed to close it, the modal isn't closed. Here's the code:

var buyModal = document.getElementById("buyModal");
var sellModal = document.getElementById("sellModal");

function buy() {
  buyModal.style.display = "block";
}

function sell() {
  sellModal.style.display = "block";
}

function close() {
  buyModal.style.display = "none";
  sellModal.style.display = "none";
}

<button id="buyButton" onclick="buy()">Buy a Currency Pair</button>
<button id="sellButton" onclick="sell()">Sell a Currency Pair</button>
<div id="buyModal" class="modal">
  <div class="modal-content">
    <button class="close" onclick="close()">&times;</button>
    <p>Buy</p>
  </div>
</div>
<div id="sellModal" class="modal">
  <div class="modal-content">
    <button class="close" onclick="close()">&times;</button>
    <p>Sell</p>
  </div>
</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Does anybody know why it doesn't work?

CodePudding user response：

Close is a reserved JavaScript word and the browser refuses to call it in an event.

You must choose a new name (for example closeDiv):

var buyModal = document.getElementById("buyModal");
var sellModal = document.getElementById("sellModal");

function buy() {
  buyModal.style.display = "block";
}

function sell() {
  sellModal.style.display = "block";
}

function closeDiv() {
  buyModal.style.display = "none";
  sellModal.style.display = "none";
}

<button id="buyButton" onclick="buy()">Buy a Currency Pair</button>
<button id="sellButton" onclick="sell()">Sell a Currency Pair</button>
<div id="buyModal" class="modal">
  <div class="modal-content">
    <button class="close" onclick="closeDiv()">&times;</button>
    <p>Buy</p>
  </div>
</div>
<div id="sellModal" class="modal">
  <div class="modal-content">
    <button class="close" onclick="closeDiv()">&times;</button>
    <p>Sell</p>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>