Issue with code: Only the most recent modal is being opened when multiple buttons are

Question

Issue with code: Only the most recent modal is being opened when multiple buttons are

Just starting out with coding and working on a web app. Trying to add two buttons at the top of the page - one for login/create an account and the other for adding reviews. Successfully implemented the first button, which displays a modal when clicked. However, when I tried to add the second button, both buttons ended up displaying the same modal.

Both modals have a small 'x' at the top right corner for closing them, but it doesn't work now. Here's a snippet of my code:

The CSS styles are defined in the head section.

    /* The Modal (background) */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.3); /* Used to grey out the rest of the screen */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe; /* Background colour of Modal */
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

The actual HTML code is inside the body section.

<h2>Modal Testing</h2>

<!-- Buttons to open Modals -->
<button id="loginBtn">Account</button>
<button id="reviewBtn">Add Review</button>

...

javascript html css

Answer 1

Answer №1

When you use JavaScript within different <script> tags, it doesn't necessarily mean they are separate blocks – rather, they get appended to each other. This can lead to issues like variable overwriting, for example if you declare a Variable modal in one block and then again in the second block, the Variable will be overwritten. To prevent this, I have changed the Var names to XXX1 and XXX2.

function visible(){
    var x = document.getElementById("userInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

// Get the modal
var modal1 = document.getElementById('loginModal');

// Get the button that opens the modal
var btn1 = document.getElementById("loginBtn");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn1.onclick = function() {
    modal1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    modal1.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
}

// Get the modal
var modal2 = document.getElementById('addReviewModal');

// Get the button that opens the modal
var btn2 = document.getElementById("reviewBtn");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn2.onclick = function() {
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
    modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
}

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.3); /* Used to grey out the rest of the screen */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe; /* Background colour of Modal */
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

<h2>Modal Testing</h2>

<!-- Buttons to open Modals -->
<button id="loginBtn">Account</button>
<button id="reviewBtn">Add Review</button>

<!-- The Modals -->

<!-- Login/Create Account Modal -->
<div id="loginModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <p>Login details</p>
    <!-- Allows the user to input information-->
    <form action="/action_page.php">
        Username:<br>
        <input type="text" name="username" value="">
        <br>
        Password:<br>
        <input type="password" value="" id="userInput">
        <br><br>
        <input type="checkbox" onclick="visible()">Show Password
    </form>
    <button id="signInBtn">Sign In</button>
    <p>Not got an account? Sign up now!</p>
    <button id="signUpBtn">Sign Up</button>
    <button id="cancelBtn">Cancel</button>

</div>

</div>

<!-- Add Review Modal -->
<div id="addReviewModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <p>Add Review</p>
    <!-- Allows the user to input information-->
    <form action="/review_page.php">
        Location:<br>
        <input type="text" name="location" value="">
        <br>
        Comments:<br>
        <input type="text" name="comments" value="">
        <br>
    </form>
    <button id="submitBtn">Submit Review</button>
    <button id="cancelBtn">Cancel</button>

</div>

</div>

With these changes, the buttons now open their corresponding modals as intended.

If I find a solution to the "Close on X" functionality, I'll update you here.

Apologies for any language barriers, I hope my explanation was clear enough :)

Answer 2

When you use JavaScript within different <script> tags, it doesn't necessarily mean they are separate blocks – rather, they get appended to each other. This can lead to issues like variable overwriting, for example if you declare a Variable modal in one block and then again in the second block, the Variable will be overwritten. To prevent this, I have changed the Var names to XXX1 and XXX2.

function visible(){
    var x = document.getElementById("userInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

// Get the modal
var modal1 = document.getElementById('loginModal');

// Get the button that opens the modal
var btn1 = document.getElementById("loginBtn");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn1.onclick = function() {
    modal1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    modal1.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
}

// Get the modal
var modal2 = document.getElementById('addReviewModal');

// Get the button that opens the modal
var btn2 = document.getElementById("reviewBtn");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn2.onclick = function() {
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
    modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
}

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.3); /* Used to grey out the rest of the screen */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe; /* Background colour of Modal */
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

<h2>Modal Testing</h2>

<!-- Buttons to open Modals -->
<button id="loginBtn">Account</button>
<button id="reviewBtn">Add Review</button>

<!-- The Modals -->

<!-- Login/Create Account Modal -->
<div id="loginModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <p>Login details</p>
    <!-- Allows the user to input information-->
    <form action="/action_page.php">
        Username:<br>
        <input type="text" name="username" value="">
        <br>
        Password:<br>
        <input type="password" value="" id="userInput">
        <br><br>
        <input type="checkbox" onclick="visible()">Show Password
    </form>
    <button id="signInBtn">Sign In</button>
    <p>Not got an account? Sign up now!</p>
    <button id="signUpBtn">Sign Up</button>
    <button id="cancelBtn">Cancel</button>

</div>

</div>

<!-- Add Review Modal -->
<div id="addReviewModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <p>Add Review</p>
    <!-- Allows the user to input information-->
    <form action="/review_page.php">
        Location:<br>
        <input type="text" name="location" value="">
        <br>
        Comments:<br>
        <input type="text" name="comments" value="">
        <br>
    </form>
    <button id="submitBtn">Submit Review</button>
    <button id="cancelBtn">Cancel</button>

</div>

</div>

With these changes, the buttons now open their corresponding modals as intended.

If I find a solution to the "Close on X" functionality, I'll update you here.

Apologies for any language barriers, I hope my explanation was clear enough :)

Answer 3

Answer №2

try this instead

modal.getElementsByClassName("close")[0];

for this code snippet

document.getElementsByClassName("close")[0];

Answer 4

try this instead

modal.getElementsByClassName("close")[0];

for this code snippet

document.getElementsByClassName("close")[0];

Issue with code: Only the most recent modal is being opened when multiple buttons are

Answer №1

Answer №2

Similar questions

Unlock the power of Shopify's API using node.js and React. Learn how to seamlessly read and write to the Shopify App API

What is the best way to save a large array to a .txt file in node.js?

The nodejs server failed to respond to my request, displaying "undefined" instead

Discrepancy in the vertical pattern repetition of the SVG background

Timer for searching webpages using Javascript

Changing a string to uppercase and lowercase

(Angular) Employing *ngFor directive for populating a table

Tips on how to ensure a function in jQuery completes before executing another function

Angular: A guide to binding to the required/ngRequired attribute

Overlap and cover additional elements within a DIV

The last javascript file that was included has been overlooked

Issue with Django URLs: Error when trying to match routes

What is the best way to incorporate CSS animations into JavaScript for mobile devices?

Customizing HTML element tags in MUI: Best practices

Preventing jQuery plugin from loading in Ajax response

Extract the color of an individual character

I am having issues with Tailwind CSS overriding the responsive padding on my website

Changing the color of Material UI pagination: a step-by-step guide

Retrieve JSON information from the driver's console using Selenium with Python

Using bootstrap can alter the positioning of elements that have margins relative to other elements