How to control the span characteristics based on given data

Question

The following HTML code creates 3 elements, and allows the user to click on them / select them.

const changeColor = (evt) => {
  if (evt.currentTarget.classList.contains("is-active")) {
    evt.currentTarget.classList.remove("is-active");
  } else {
    evt.currentTarget.classList.add("is-active");
  }
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));

.tagger1010 span {
  padding: 6px 10px;
  background: #D0E8E4;
  border-radius: 18px;
  color: #000000;
  font-family: Roboto;
  font-size: 12px;
  margin: 0 4px 8px 0;
  font-weight: 500;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  border: 1px solid BBD0CD;
}

.tagger1010 span.is-active {
  background-color: #008fde;
  color: #ffffff;
}

.tagger1010 span:hover {
  background-color: #008fde;
  color: #ffffff;
}

<div class="tagger1010">
  <span>Google</span>
  <span>Microsoft</span>
  <span>Facebook</span>
  <span>LinkedIn</span>
</div>

<div class="as-console-wrapper"></div>
<div class="as-console"></div>

What I am looking to do is pre-assign spans as "is-active" if the tag is included in a given list.

For example, if you run the above code, and the given list includes "Microsoft" and "LinkedIn" - I would like for "Microsoft" and "LinkedIn" to already be highlighted and have the background-color be #008fde, and the color be #ffffff.

Would anyone know how I could say, "if the text of this span is included in this list, make it have the is-active characteristics"

You can get all the elements needed (like all children of tagger1010 or all spans) and check each one to see if it's text is contained in some predefined list. If it is add the .is-active class — CodeNinja, Feb 20 '21 at 06:50

Kaushik Makwana · Answer 1 · 2021-02-20T07:09:03.460

Checkout here https://jsfiddle.net/qmx3105s/

<script type="text/javascript">
                const changeColor = (evt) => {
                    if (evt.currentTarget.classList.contains("is-active")){
                            evt.currentTarget.classList.remove("is-active");
                            localStorage.removeItem(evt.currentTarget.textContent);
                            
                     } else {
                          evt.currentTarget.classList.add("is-active");
                        localStorage.setItem(evt.currentTarget.textContent,'true');
                    }
                };
                const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
                EL_tagger1010_children.forEach(EL => {
                    console.log('EL',EL)
                    if(localStorage.getItem(EL.textContent)){
                        EL.classList.add("is-active");
                    }
                    EL.addEventListener("click", changeColor);
                });
        </script>

@youewew Replace the above script with your script. – Kaushik Makwana Feb 20 '21 at 06:58 — Kaushik Makwana, Feb 20 '21 at 06:58

Miro · Answer 2 · 2021-02-21T05:58:36.477

Edited: Search by innerText and Find in Array added.

Original: I highly recommend adding id="X" to your html to make it easier to target the specific tag. Having to rely on the inner text is much more complicated and bad practice.

Then you need an array to hold your IDs and iterate it. Finally we add the .is-active

Here's what that looks like:

const changeColor = (evt) => {
    if (evt.currentTarget.classList.contains("is-active")) {
        evt.currentTarget.classList.remove("is-active");
    } else {
        evt.currentTarget.classList.add("is-active");
    }
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));

var tag_names = ["Microsoft", "LinkedIn"];
var tags = document.getElementsByTagName("span");

for (var i = 0; i < tags.length; i++) {
    if(tag_names.indexOf( tags[i].textContent ) != -1){
       tags[i].classList.add('is-active');
    }
}

.tagger1010 span {
  padding: 6px 10px;
  background: #D0E8E4;
  border-radius: 18px;
  color: #000000;
  font-family: Roboto;
  font-size: 12px;
  margin: 0 4px 8px 0;
  font-weight: 500;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  border: 1px solid BBD0CD;
}

.tagger1010 span.is-active {
  background-color: #008fde;
  color: #ffffff;
}

.tagger1010 span:hover {
  background-color: #008fde;
  color: #ffffff;
}

<div class="tagger1010">
  <span>Google</span>
  <span>Microsoft</span>
  <span>Facebook</span>
  <span>LinkedIn</span>
</div>

<div class="as-console-wrapper"></div>
<div class="as-console"></div>

I think it is not a solution bcz it's static. when you refresh the page. it will be starting over. — Kaushik Makwana, Feb 20 '21 at 07:05
OP has no requirement for any of that. Only highlight form a list: `pre-assign spans as "is-active" if the tag is included in a given list.` — Miro, Feb 20 '21 at 07:09
@Miro Thanks for this! I am unable to do the id idea - while it is a great one. I am using the Bubble.io platform, and I can't get dynamically get the count to associate the id with the count in the list. The list won't be more than 30-40 elements. What would make getting the inner text bad practice? I assume it's much slower. — youewew, Feb 21 '21 at 02:17

How to control the span characteristics based on given data

2 Answers2