Develop Reference

How to achieve level 3 div with javascript and apply styling

Hello I would like to reach a level 3 div and change the style of this div
in my example I would therefore like to be able to apply disply:none on style color red
to make the word Warning invisible
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>

To select 3rd level div:
document.querySelector('#Zone > div > div > div')
Now the problem is you have 4 div at 3rd level. So needed to select all and check style color. That gives:
const warningNone = () => {
Array.from(document.querySelectorAll('#Zone > div > div > div')).forEach(el => {
if (el) {
if (el.style.color === 'red') {
el.style.display = 'none';
}
}
})
}
window.addEventListener('load', warningNone);
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
I modified the snippet to check the >div>div>div existence
By the way, I put the function to be fired when document loaded, otherwise your red will not apply
3...
try to split the query line in 2:
const warningNone = () => {
const els = document.querySelectorAll('#Zone > div > div > div');
els.forEach(el => {
if (el.style.color === 'red') {
el.style.display = 'none';
}
})
}
window.addEventListener('load', warningNone);
now in dev tools check which line fire the error

Is there a way for a JS script to affect only a part of my HTML code?

I'm using JS for the first time to display/hide images depending on if a button is pressed: if the "New version" button is pressed, I want the "new" image to appear and the "old" to hide, and vice-versa for the "Old version" button.
Here's my Code :
function showOld() {
document.getElementById('new')
.style.display = "none";
document.getElementById('old')
.style.display = "block";
document.getElementById('btn-to-old')
.classList.toggle('btn-click');
document.getElementById('btn-to-new')
.classList.toggle('btn-click');
}
function showNew() {
document.getElementById('old')
.style.display = "none";
document.getElementById('new')
.style.display = "block";
document.getElementById('btn-to-new')
.classList.toggle('btn-click');
document.getElementById('btn-to-old')
.classList.toggle('btn-click');
}
<div class="container">
<div class="row">
<h2>Index</h2>
<div class="button-box">
<button type="button" onclick="showOld()" id="btn-to-old" class="btn-click">Old version</button>
<button type="button" onclick="showNew()" id="btn-to-new">New version</button>
</div>
<img src="img/old-index.png" alt="old-index" id="old">
<img src="img/new-index.png" alt="new-index" id="new">
</div>
</div>
<div class="container">
<div class="row">
<h2>Home</h2>
<div class="button-box">
<button type="button" onclick="showOld()" id="btn-to-old" class="btn-click">Old version</button>
<button type="button" onclick="showNew()" id="btn-to-new">New version</button>
</div>
<img src="img/old-home.png" alt="old-index" id="old">
<img src="img/new-home.png" alt="new-index" id="new">
</div>
</div>
Needless to say that this code doesn't work, and pressing the second set of buttons will change the first images and not the second ones. The idea is that only the two images directly below the buttons will be affected by the pressing of the button above them, and not the images down the page. I don't know how to get such a result.
I'm aware that I cannot use the same ID twice, but using classes somehow broke my page.

As you said, you can't have duplicate IDs, so you need to use classes.
Use DOM navigation operations to address the elements in the same container as the button you cllick.
function showOld(el) {
let container = el.closest(".container");
container.querySelector('.new')
.style.display = "none";
container.querySelector('.old')
.style.display = "block";
container.querySelector('.btn-to-old')
.classList.toggle('btn-click');
container.querySelector('.btn-to-new')
.classList.toggle('btn-click');
}
function showNew(el) {
let container = el.closest(".container");
container.querySelector('.old')
.style.display = "none";
container.querySelector('.new')
.style.display = "block";
container.querySelector('.btn-to-new')
.classList.toggle('btn-click');
container.querySelector('.btn-to-old')
.classList.toggle('btn-click');
}
.btn-click {
color: green;
}
<div class="container">
<div class="row">
<h2>Index</h2>
<div class="button-box">
<button type="button" onclick="showOld(this)" class="btn-to-old btn-click">Old version</button>
<button type="button" onclick="showNew(this)" class="btn-to-new">New version</button>
</div>
<img src="img/old-index.png" alt="old-index" class="old">
<img src="img/new-index.png" alt="new-index" class="new">
</div>
</div>
<div class="container">
<div class="row">
<h2>Home</h2>
<div class="button-box">
<button type="button" onclick="showOld(this)" class="btn-to-old btn-click">Old version</button>
<button type="button" onclick="showNew(this)" class="btn-to-new">New version</button>
</div>
<img src="img/old-home.png" alt="old-index" class="old">
<img src="img/new-home.png" alt="new-index" class="new">
</div>
</div>

JavaScript, HTML search engine - how to get parent of an element?

My problem is:
Search script is working, but it only hides h3 elements from the code.
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
I need the code to hide the whole div with "post" ID instead of just h3 element.
How do i do that?
HTML Code for Search Bar:
<div id="kontener" class="container">
<div style="text-align:center" id="search-bar">
<input type="text" id="searchbar" onkeyup="searchBar()" class="shadow-lg">
</div>
</div>
HTML Code on Website
<!-- First element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ASO</h2>
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
</a>
<p class="post-meta">11 Maj, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of First element -->
<!-- Second element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ELSK</h2>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
</a>
<p class="post-meta">26 Kwiecień, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of Second element -->
JavaScript code:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="flex";
}
}
}
</script>

You just need to target couple of parent nodes, either by .parentElement / .parentNode or use .closest function.
Example:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].closest('#post').style.display="none";
// Or this below (note each parentElement targets parent tag)
// x[i].parentElement.parentElement.parentElement.parentElement.parentElement.style.display="none";
}
else {
x[i].closest('#post').style.display="flex";
}
}
}
</script>

Show/Hide Div as Overlay

I am trying to create image overlays which can toggle on and off by clicking a button. Basically I have one main image then I want to click button A and have overlay A show up over the main image and click button B and have overlay A go away and show overlay B.
Currently I am trying to do this by creating a hidden div which has a background image on it. The current code works for the first button listed but not for any of the others.
<div class="hide schoolContent" id="schools"
</div>
<div class ="hide recreationContent" id="recreation">
</div>
<div class="hide restaurantsContent"id="restaurants">
</div>
<div class="hide banksContent" id="banks">
</div>
<div class="hide groceriesContent"id="groceries">
</div>
<div class="hide transportationContent"id="transportation">
</div>
<div class="hide libraryContent" id="library"></div>
<div>
<button class="alertName" name="schoolContent">Schools</button>
<button class="alertName" name="recreationContent">Recreation</button>
<button class="alertName" name="restaurantsContent">Restaurants</button>
<button class="alertName" name="banksContent">Banks</button>
<button class="alertName" name="groceriesContent">Groceries</button>
<button class="alertName" name="transportationContent">Study Transportation</button>
<button class="alertName" name="libraryContent">Library</button>
</div>
<script>var alertName = document.getElementsByClassName("alertName");
var myFunction = function() {
var hide = document.getElementsByClassName("hide");
for (var i =< 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
var name = this.getAttribute("name");
var show = document.querySelector('.' + name);
if (show.style.display = "none") {
show.style.display = "block";
}
else {
show.style.display = "none";
}
};
for (var i = 0; i < alertName.length; i++) {
alertName[i].addEventListener('click', myFunction);
}</script>

Pure Javascript display div based on Menu Item Clicked?

I just need some advice with my current code. I am trying to display a different div depending on the menu item clicked. I was thinking theoretically using some kind of indexing method. i think the if statement i am using for once does not work but also seems a little horrible in terms of coding.
anyway what do you think?
/**
* Lets get Menu container
*/
var menu = document.getElementById("configurator-menu");
/**
* Set Current Tab and Store which tab is Active
*/
var navitem = menu.querySelector(".configurator-menuitems div");
navitem.className += " " + "activeTab";
/**
* Add click events to Menu Tabs
*/
var tabs = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
/**
* Tabs Logic
*/
function displayPage() {
var items = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("activeTab");
}
this.className += " " + "activeTab";
if (this.classList.contains("mainMenu1")) {
var item = document.getElementByClassName("appCanvas1");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu2")) {
var item = document.getElementByClassName("appCanvas2");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu3")) {
var item = document.getElementByClassName("appCanvas3");
item.style.display = "block";
}
}
<div id="configurator-menu" class="appMenu" style="background-color:#001A35;">
<div class="appLogo">
Logo Here
</div>
<hr class="no-margin" />
<div class="configurator-menuitems">
<div class="mainMenu-btn mainMenu1">Shape</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu2">Size</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu3">Color</div><hr class="no-margin" />
</div>
<div class="menuspacer"></div><hr class="no-margin" />
<div class="currentSettings">
<p class="settings-title">Your Selection</p>
<p class="variant-config">Shape: </p>
<p class="variant-config">Colors: </p>
<p class="variant-config">Size: </p>
<p class="variant-config">Quantity: </p>
<p class="variant-config">Total Price: </p>
</div>
</div>
<div class="canvas-wrapper">
<div class="appCanvas1" style="background-color:#e7e7e7;">
<div class="shape-selection-bar">
<div class="shape-selector"><img src="'.plugins_url("pentant_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("pendant_cyl.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_cyl.png", __FILE__).'" alt="" /></div>
</div>
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas2" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas3" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
</div>