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

How to get corresponding value to a button in JavaScript?

I don't want the value of button but instead I want the value of a span inside a div which corresponds to that button. I have a model in which buttons correspond to a div.
For example here you can see there are 3 buttons that correspond to each assignment.
Whenever a user clicks Assign button I need to return the value of the title span for example if someone clicks assign on first, it should print "English UOI 1" in the console.
The html code wraps up like this -
<div class="assignment-wrapper">
<div class="assignment-title"><span class="assignment-name">English UOI 1</span><span>15-06-2021</span></div>
<div class="assignment-functions">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
Now this is the example for structure but I would be doing this using javascript, I have retrieved data for database an I need to present each assignment in a table form.
If you have a better model you can suggest changes.
Any help is appreciated.

You can target up the element tree 2 parents and then back down two children and get the spans textContent.
const btn = document.querySelectorAll('.assignment-function-btn')
function getValue(e){
let target = e.target.parentNode.parentNode.children[0].children[0]
console.log(target.textContent)
}
btn.forEach(button => {
button.addEventListener('click', getValue)
})
.row {
display: flex;
justify-content: space-around;
}
.assignment-function-btn {
background: #ddd;
border: 1px solid black;
border-radius: 5px;
margin-left: 5px;
padding: 3px;
cursor: pointer;
}
<div class="assignment-wrapper row">
<div class="assignment-title">
<span class="assignment-name">English UOI 1</span>
<span>15-06-2021</span>
</div>
<div class="assignment-functions row">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
or...
If each of these classes per say, has its own line with the three buttons for each title/class, you could code a dataset attribute into the buttons parent element that represents the title/class that button is being used for. See my second snippit for that example...
Using dataset attribute:
In your HTML you add a data attribute like data-class-name="English UOI 1" to the direct parent element of your buttons. Then use the event target + parentNode to get the e.target.parentNode.dataset.className.
className is javascript camel-case for class-name.
<div class="assignment-title">
<span class="assignment-name">English UOI 1</span>
<span>15-06-2021</span>
</div>
<!--/ Here we add the data attribute data-class-name="English UOI 1" /-->
<div data-class-name="English UOI 1" class="assignment-functions row">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
const btn = document.querySelectorAll('.assignment-function-btn')
function getValue(e) {
let target = e.target.parentNode
console.log(target.dataset.className)
}
btn.forEach(button => {
button.addEventListener('click', getValue)
})
.row {
display: flex;
justify-content: space-around;
}
.assignment-title {
flex: auto;
}
.assignment-function-btn {
background: #ddd;
border: 1px solid black;
border-radius: 5px;
margin-left: 5px;
padding: 3px;
cursor: pointer;
}
<div class="assignment-wrapper">
<div class="row">
<div class="assignment-title">
<span class="assignment-name">English UOI 1</span>
<span>15-06-2021</span>
</div>
<div data-class-name="English UOI 1" class="assignment-functions row">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
<div class="row">
<div class="assignment-title">
<span class="assignment-name">Social Sciences</span>
<span>23-06-2021</span>
</div>
<div data-class-name="Social Sciences" class="assignment-functions row">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
<div class="row">
<div class="assignment-title">
<span class="assignment-name">Concepts of Algebra</span>
<span>26-06-2021</span>
</div>
<div data-class-name="Concepts of Algebra" class="assignment-functions row">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
</div>

You could use .closest to grab the .assignment-wrapper up the DOM tree and then, within the wrapper, find the .assignment-name element. Then grab its innerText.
Edit: Also, I strongly recommend using button elements for button behavior for accessibility purposes.
const btn = document.querySelector(".assign-task");
btn.addEventListener("click", (e) => {
const wrapper = e.target.closest(".assignment-wrapper");
const assignment = wrapper.querySelector(".assignment-name");
console.log(assignment.innerText);
})
<div class="assignment-wrapper">
<div class="assignment-title"><span class="assignment-name">English UOI 1</span><span>15-06-2021</span></div>
<div class="assignment-functions">
<button class="assign-task assignment-function-btn">Assign</button>
<button class="update-task assignment-function-btn">Update</button>
<button class="view-results assignment-function-btn">Results</button>
</div>
</div>

what i understand of you that you wants to get the text of .assignment-title span blongs to the parent of this button
Here's Example
var assignTask = document.getElementsByClassName('assign-task');
for(var i = 0; i < assignTask.length; i++) {
assignTask[i].addEventListener('click',function() {
var text = this.parentNode.parentNode.getElementsByClassName('assignment-name')[0].innerText;
console.log(text)
})
}

You can try the below
<div class="assignment-wrapper">
<div class="assignment-title">
<span class="assignment-name">English UOI 1</span
><span>15-06-2021</span>
</div>
<div class="assignment-functions">
<div class="assign-task assignment-function-btn">Assign</div>
<div class="update-task assignment-function-btn">Update</div>
<div class="view-results assignment-function-btn">Results</div>
</div>
</div>
<script>
function handleButtonClick(event) {
const buttonType = event.target.innerText;
const assignmentName = event.target
.closest(".assignment-wrapper")
.querySelector(".assignment-name").innerText;
console.log(`${assignmentName} -> ${buttonType}`);
}
document
.querySelectorAll(".assignment-function-btn")
.forEach((ele) => ele.addEventListener("click", handleButtonClick));
</script>

Get next element with class (that's not a child or sibling)

With the press of a button, I want to toggle the class .active on the next div.bottom. These are basically accordions, but with a different structure.
Using nextElementSibling I guess won't work here to select the target element. How would one select such an element, that's neither a child nor a sibling (in plain JS)?
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button></button></div>
</div>
</div>
<div class="bottom"></div>
</div>

I'd do it by using closest to go up to the container .wrapper element, then querySelector to find the bottom element:
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button && button.closest(".wrapper");
const bottom = wrapper && wrapper.querySelector(".bottom");
if (bottom) {
bottom.classList.toggle("active");
}
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>
Or the same thing using optional chaining (relatively new):
function onClick(event) {
const wrapper = event.target.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
}
Live Example:
// I've added event delegation here
document.body.addEventListener("click", function onClick(event) {
const button = event.target.closest(".inner button");
const wrapper = button?.closest(".wrapper");
const bottom = wrapper?.querySelector(".bottom");
bottom?.classList.toggle("active");
});
.active {
color: blue;
border: 1px solid black;
}
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button A</button></div>
</div>
</div>
<div class="bottom">Bottom A</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<div><button>Button B</button></div>
</div>
</div>
<div class="bottom">Bottom B</div>
</div>

By using closest() you can traverse the DOM upwards. With this it's easy to just get the relevant .bottom and toggle the active class on this element.
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', (e) => {
e.currentTarget.closest('.wrapper').querySelector('.bottom').classList.toggle('active');
});
});
.bottom {
display: none
}
.bottom.active {
display: block
}
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle</button>
</div>
</div>
<div class="bottom">Hidden content</div>
</div>
<div class="wrapper">
<div class="top">
<div class="inner">
<button type="button">Toggle 2</button>
</div>
</div>
<div class="bottom">Hidden content 2</div>
</div>

Adding a Div around the contents of 2 matched elements

I am trying to add a div with class name 'wrapped' around 2 divs with innerHTML 'one' and 'two'
<div class='blk'>one</div>
<div class='blk'>two</div>
Here I am trying to use the first and second 'clearfix' class element and use it as a selector to wrap the contents between them with a div. What I understand from the below code is wrapAll will wrap only the matched elements. I am trying to figure out what functionality in jquery will help me to wrap one and two with a parent div.
var arr = $('.clearfix');
$(arr[0], arr[1]).wrapAll('<div class="wrapped"/>');
.wrapped {
background-color: 'red';
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
</div>
My expected output is :
<div>
<div class='clearfix'></div>
<div class='wrapped'>
<div class='blk'>one</div>
<div class='blk'>two</div>
</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
</div>

If I understand the question correctly, you're wanting to wrap a div (with class wrapped) around the two elements (with class blk) that contain the text content; "one" and "two".
One way to achieve this would be via the :eq selector - this allows you to isolate specific elements for the .blk class selector (ie the first and second), and than apply wrapping to those only:
/* Select the first and second elements that match the .blk selector
and apply wrapped div to those only */
$('.blk:eq(0), .blk:eq(1)').wrapAll('<div class="wrapped"/>');
.wrapped{
background-color: red; /* Fixed syntax error here too :) */
}
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
</div>

You can try with .filter()
var arr = $('.blk');
arr.filter((i, el) => i < 2).wrapAll(`<div class="wrapped"></div>`);
.wrapped{
background-color: red;
}
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
</div>

var clearfixParent = $('.clearfix').parent();
var wrappedEle = 0;
$(clearfixParent).find( 'div' ).each(function(){
if( $(this).hasClass( 'clearfix' ) ) {
wrappedEle += 1;
$(this).after('<div class="wrapped"/>');
} else {
$(this).appendTo( '.wrapped:eq(' + ( wrappedEle - 1 ) + ')' );
}
});
.wrapped {
background-color: 'red';
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
</div>

You don't need jQuery for this, you can use the DOM API.
const appendSelectedSiblings = selector => target => {
while (target.nextElementSibling && target.nextElementSibling.matches(selector))
target.appendChild(target.nextElementSibling)
}
document.querySelectorAll('.clearfix').forEach(appendSelectedSiblings('.blk'))
.clearfix > .blk { background: green };
<div id="root">
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
</div>

From what I understood with the markup you included, you want to enclose/group all the divs with class BLKs that are beside each other.
I made a snippet that will be able to do this dynamically, without specifying the index of your wrap all.
Feel free to update if you could make the code more efficient.
var divs = $(".scan").find("div");
var toEnclose = [];
var continueEnclose;
var latestArray = [];
divs.each(function(i) {
if ($(this).hasClass("clearfix")) {
if (latestArray.length != 0) {
toEnclose.push(latestArray);
latestArray = [];
}
}
if ($(this).hasClass("blk")) {
latestArray.push(i);
}
});
if (latestArray.length != 0) {
toEnclose.push(latestArray);
latestArray = [];
}
var enclose;
var mix = [];
$.each(toEnclose, function(i, k) {
$.each($(this), function(i2, k2) {
if (i != 0) {
k2 += i;
}
mix.push(".scan div:eq(" + k2 + ")");
});
enclose = mix.join(",");
// console.log(enclose);
$(enclose).wrapAll($("<div class='wrapped'></div>"));
mix = [];
});
.wrapped {
background-color: red;
margin-bottom: 5px;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scan">
<div class='clearfix'></div>
<div class='blk'>one</div>
<div class='blk'>two</div>
<div class='clearfix'></div>
<div class='blk'>3</div>
<div class='blk'>4</div>
<div class='clearfix'></div>
<div class='blk'>5</div>
<div class='blk'>6</div>
<div class='blk'>7</div>
</div>

Edit css of "item" when clicking on corresponding "btn"

So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.

Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>

JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.

Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.

See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}

Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>