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()">×</button>
<p>Buy</p>
</div>
</div>
<div id="sellModal" class="modal">
<div class="modal-content">
<button class="close" onclick="close()">×</button>
<p>Sell</p>
</div>
</div>
</div>Does anybody know why it doesn't work?
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()">×</button>
<p>Buy</p>
</div>
</div>
<div id="sellModal" class="modal">
<div class="modal-content">
<button class="close" onclick="closeDiv()">×</button>
<p>Sell</p>
</div>
</div>