When clicking span element, modal doesn't close

Question

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>

Does anybody know why it doesn't work?

Answer 1

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>