JavaScript
x
174
174
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<link rel="stylesheet" href="styles/reset.css">8
<link rel="stylesheet" href="styles/media/media.css">9
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">10
<link rel="stylesheet" href="/styles/hover/hover.css">11
<link rel="stylesheet" href="styles/style.css">12
<title>Document</title>13
</head>14
<body>15
<!-- DISCOVER -->16
<section class="services-section">17
<div class="services-overview">18
<h4>19
<a class="discover" href="#">20
discover21
</a>22
</h4>23
<h3>24
<a class="hot-services" href="#">25
our hot services26
</a>27
</h3>28
<p>29
<a class="overview" href="#">30
Lorem Ipsum is simply dummy text of 31
the printing and typesetting industry. 32
Lorem Ipsum has been the industry's standard33
</a>34
</p>35
</div>36
<!-- TRAVEL OPTIONS -->37
<div class="travel-options-main-cont">38
<!-- container1 -->39
<div class="booking-container">40
<div class="airplane">41
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">42
</div>43
<div class="modal" >44
<div class="modal-content">45
<img src="/images/travel photos/airplane.png" alt="airplane">46
<h3>47
<a class="modal-title" href="#">48
<h3>49
<a class="modal-title" href="#">50
flight booking51
</a>52
</h3>53
</a>54
</h3>55
<p>56
<a class="modal-text" href="#">57
Lorem Ipsum is simply dummy text of the 58
printing and typesetting industry. Lorem.59
</a>60
</p>61
</div>62
</div>63
</div>64
<!-- container 2 -->65
<div class="booking-container">66
<div class="airplane">67
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">68
</div>69
<div class="modal" >70
<div class="modal-content">71
<img src="/images/travel photos/airplane.png" alt="airplane">72
<h3>73
<a class="modal-title" href="#">74
hotel and resort booking75
</a>76
</h3>77
<p>78
<a class="modal-text" href="#">79
Lorem Ipsum is simply dummy text of the 80
printing and typesetting industry. Lorem.81
</a>82
</p>83
</div>84
</div>85
</div>86
<!-- container3 -->87
<div class="booking-container">88
<div class="airplane">89
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">90
</div>91
<div class="modal" >92
<div class="modal-content">93
<img src="/images/travel photos/airplane.png" alt="airplane">94
<h3>95
<a class="modal-title" href="#">96
flight booking97
</a>98
</h3>99
<p>100
<a class="modal-text" href="#">101
Lorem Ipsum is simply dummy text of the 102
printing and typesetting industry. Lorem.103
</a>104
</p>105
</div>106
</div>107
</div>108
<!-- container4 -->109
<div class="booking-container">110
<div class="airplane">111
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">112
</div>113
<div class="modal" >114
<div class="modal-content">115
<img src="/images/travel photos/airplane.png" alt="airplane">116
<h3>117
<a class="modal-title" href="#">118
flight booking119
</a>120
</h3>121
<p>122
<a class="modal-text" href="#">123
Lorem Ipsum is simply dummy text of the 124
printing and typesetting industry. Lorem.125
</a>126
</p>127
</div>128
</div>129
</div>130
<!-- container5 -->131
<div class="booking-container">132
<div class="airplane">133
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">134
</div>135
<div class="modal" >136
<div class="modal-content">137
<img src="/images/travel photos/airplane.png" alt="airplane">138
<p>139
<a class="modal-text" href="#">140
Lorem Ipsum is simply dummy text of the 141
printing and typesetting industry. Lorem.142
</a>143
</p>144
</div>145
</div>146
</div>147
<!-- container 6 -->148
<div class="booking-container">149
<div class="airplane">150
<img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">151
</div>152
<div class="modal" >153
<div class="modal-content">154
<img src="/images/travel photos/airplane.png" alt="airplane">155
<h3>156
<a class="modal-title" href="#">157
flight booking158
</a>159
</h3>160
<p>161
<a class="modal-text" href="#">162
Lorem Ipsum is simply dummy text of the 163
printing and typesetting industry. Lorem.164
</a>165
</p>166
</div>167
</div>168
</div>169
<!-- -->170
</div>171
</section>172
173
174
JavaScript
1
2
1
<script src="app.js/main.js"></script>2
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
JavaScript
1
11
11
1
const bkContEle = document.querySelectorAll('.booking-container'); // Get all container in an array2
3
const getPEle = bkContEle[2].getElementsByClassName('modal-text')[0].innerHTML; // Get innerHTML text of a 2nd booking container4
5
console.log(getPEle);6
7
// Set New content of 3rd Booking Container8
const setPEle = bkContEle[2].getElementsByClassName('modal-text')[0].textContent = "I have changed the context of this particular booking container.";9
10
console.log(setPEle);11
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:
JavaScript
1
6
1
const getTextEle = bkContEle[3].getElementsByClassName('modal-text')[0];2
3
const txt = document.createTextNode("Changin text even a more secure way to protect from XSS attacks");4
5
getTextEle.replaceWith(txt);6
I hope, it gonna help you out to solve your problem.