Define element within loop

[phppup]

A few questions have come up recently.

Essentially, I have a webpage with several DIVs and I want the div that is in FOCUS to change color and thereby become highlighted.

Additionally, I would want other DiVs to return to their original color (probably white) at the same occurrence.

Using ONBLUR seemed "old school", so in the name of progress, I've created my problem. LOL

Using this code

const divs = document.querySelectorAll('div');

divs.forEach(e => {
  e.addEventListener('click', (e) => {
  
    // remove the class from the others
    divs.forEach(d => d.classList.remove('active'));
    
    // add the class to the current one
    e.target.classList.add('active');
  });
})

with correlating CSS to change the DIV background color has its own issues (as it seems to be working on <h1> and <h2>inside the div, but not the full div itself).

Things began to work when I added

document.getElementById(e.target.id).style.background = "blue";

to replace the ACTIVE class..

My questions:

How can I "see" the variable d value?

I've tried lots of alterations and cannot see its value, ID, etc. (Mostly the script FAILS at that point when I try to "see" d.)

My assumption is that knowing d will allow me to make further adjustments (to clear the background onblur [thus, a different focus]).

Also, I want to clear all DIVs of the highlight with a click on a non-DIV element.

Any helpful info or explanations are appreciated.

Edited July 24 by phppup

[kicken]

2 hours ago, phppup said:

How can I "see" the variable d value?

Use a multi-line closure and log the value.

divs.forEach(d => {
  console.log(d);
  d.classList.remove('active');
});

 

If you just want to change some colors on click, you can probably do that without JavaScript at all.

HTML:

<div tabindex="-1">First div</div>
<div tabindex="-1">Second div</div>
<div tabindex="-1">Third div</div>

The tabindex attribute lets you make the div focusable.  Having the div focusable allows you to use the :focus css pseudo class.

CSS:

div {
  margin: 2rem;
  padding: 1rem;
  border: 2px solid #00F;
}

div[tabindex]:focus {
  background: #000;
  color: #fff;
}

 

[phppup]

3 hours ago, kicken said:

Use a multi-line closure and log the value

Yes, @kicken , that's the first thing I did; although I don't use a console, I used

alert ("d is " +d);

and the script froze at this point with no alert prompt visible.

Perhaps I'll try the option you offered. Will it revert to the initial color on blur?

[phppup]

@kicken , I implemented your suggested CSS solution and I like it.

It does what I intended and saves me the next step of dealing with reverting the colors onblur.

EXCELLENT!!

On a related note, after abandoning the specific JavaScript effort and using the CSS solution, I discovered a new conflict.

Aside from the DIV changing color on focus/blur, I have a button to make the div a third color.

Essentially, highlight on/off when DIV is selected, click button to highlight as a "reminder." (Only one section allowed)

The issue that arose is that when a DIV is effected by the JS script it seems to lose the CSS toggle ability afterward.

Each effect works okay independently, but together there is conflict.

Is there an additional CSS solution.

Is there a reason that the JS overrides the CSS?

I have tried using the JS to "restore" the DIV,

//After script had completed affecting the variable called element

//changed the color
element.style.background = "blue"
//still lost the toggle effect
element.tabindex="-1";

but it didn't work. Solution?

 

[kicken]

Styles set on an element directly (such as through element.style or the style attribute) take precedence over any styles defined in a style sheet.  It's best then to avoid setting styles directly and instead just add or remove a class from the element.  You can add and remove multiple classes if needed to be able to target specific conditions.

See my updated fiddle for an example.

[phppup]

Ahhhh. Thank you, @kicken

I used an alternate CSS solution to get both features working easier and smoother with a new CLASS definition.

At this rate, CSS is going to put JS out of business.

Thanks for the help.

Edited July 28 by phppup