<!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>
Advertisement
Answer
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.