unable to change content of duplicated modal card

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/media/media.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/styles/hover/hover.css">
    <link rel="stylesheet" href="styles/style.css">
    <title>Document</title>
</head>
<body>
      <!-- DISCOVER -->
      <section class="services-section">
        <div class="services-overview">
            <h4>
                <a class="discover" href="#">
                    discover
                </a>
            </h4>
            <h3>
                <a class="hot-services" href="#">
                    our hot services
                </a>
            </h3>
            <p>
                <a class="overview" href="#">
                    Lorem Ipsum is simply dummy text of 
                    the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard
                </a>
            </p>
        </div>
        <!-- TRAVEL OPTIONS -->
        <div class="travel-options-main-cont">
            <!-- container1 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                        <h3>
                            <a class="modal-title" href="#">
                               <h3>
                        <a class="modal-title" href="#">
                            flight booking
                        </a>
                    </h3>
                            </a>
                        </h3>
                    <p>
                        <a class="modal-text" href="#">
                        Lorem Ipsum is simply dummy text of the 
                        printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!-- container 2 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn"  src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                        <h3>
                            <a class="modal-title" href="#">
                                hotel and resort booking
                            </a>
                        </h3>
                    <p>
                        <a class="modal-text" href="#">
                        Lorem Ipsum is simply dummy text of the 
                        printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!-- container3 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn"  src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                        <h3>
                            <a class="modal-title" href="#">
                                flight booking
                            </a>
                        </h3>
                    <p>
                        <a class="modal-text" href="#">
                        Lorem Ipsum is simply dummy text of the 
                        printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!-- container4 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn"  src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                        <h3>
                            <a class="modal-title" href="#">
                                flight booking
                            </a>
                        </h3>
                    <p>
                        <a class="modal-text" href="#">
                        Lorem Ipsum is simply dummy text of the 
                        printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!-- container5 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                    <p>
                        <a class="modal-text" href="#">
                        Lorem Ipsum is simply dummy text of the 
                        printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!-- container 6 -->
            <div class="booking-container">
                <div class="airplane">
                    <img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">
                </div>
                <div class="modal" >
                    <div class="modal-content">
                        <img src="/images/travel photos/airplane.png" alt="airplane">
                        <h3>
                            <a class="modal-title" href="#">
                                flight booking
                            </a>
                        </h3>
                    <p>
                        <a class="modal-text" href="#">
                            Lorem Ipsum is simply dummy text of the 
                            printing and typesetting industry. Lorem.
                    </a>
                    </p>
                    </div>
                </div>
            </div>
            <!--  -->
        </div>
      </section>

<script src="app.js/main.js"></script>

``` I've duplicated six modal cards that operate OK with javascript, but they are all identical and I can't change different html content. I spent the entire day trying to solve this problem while feeling panicked. I have a deadline until Monday and other tasks to complete, so if I don't succeed here, I won't obtain my first internship. Please assist

const modal = document.querySelector('.modal'); const modalBtn = document.querySelector('.modalBtn'); modalBtn.addEventListener('click', showModal); modal.addEventListener('click', removeModal) document.addEventListener('click', function (event) { if ( event.target.classList.contains( 'modalBtn' ) ) { showModal(); } if ( event.target.classList.contains( 'modal' ) ) { removeModal(); } }, false); function showModal() { document.querySelector('.modal').style.display = "block"; } function removeModal() { document.querySelector('.modal').style.display = "none"; } — Zuciopath, Dec 09 '22 at 16:28
Content of which part you want to get it changed ? Any two three? If not then which particular? — Felix Tenn, Dec 09 '22 at 22:42

Felix Tenn · Accepted Answer · 2022-12-10T00:01:18.650

No need to get panic. It is a part of life as your are going to start your journey. Keep yourself calm and motivated. Things will get better with time.

As per my understanding the question, you want to change the content of duplicated card which have the same classes name. If it is the case, you can achieve as follows

const bkContEle = document.querySelectorAll('.booking-container'); // Get all container in an array

const getPEle = bkContEle[2].getElementsByClassName('modal-text')[0].innerHTML; // Get innerHTML text of a 2nd booking container

console.log(getPEle);

// Set New content of 3rd Booking Container
const setPEle = bkContEle[2].getElementsByClassName('modal-text')[0].textContent = "I have changed the context of this particular booking container.";

console.log(setPEle);

If you want to change text of all cards at once with same text then you can perform iterations over bkContEle collection. For some selective you can do as i did or also through iteration with conditional checks based on the index of collection elements.

In above solution, using innerHTML is SO NOT RECOMMENDED. Instead, you should create a textNode. This way, you are "binding" your text and you are not, at least in this case, vulnerable to an XSS attack. More detailed answer can be found here How do I change the text of a span element using JavaScript?.

The right way to do is as follows:

const getTextEle = bkContEle[3].getElementsByClassName('modal-text')[0];

const txt = document.createTextNode("Changin text even a more secure way to protect from XSS attacks");

getTextEle.replaceWith(txt);

I hope, it gonna help you out to solve your problem.

unable to change content of duplicated modal card

1 Answers1