Identifying a span element and appending to its classList

Question

Identifying a span element and appending to its classList

I am currently working on code that generates spans, and my objective is to adjust the color of specific spans based on their text content. I have identified a section where I need assistance with the syntax of the code I should input. My aim is to locate the span by its text and append 'is-active' to its classList.

    <head>
        <style>
            .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;
            }
        </style>

<body>
    
<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>  
 <script type="text/javascript">
       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 tags = ["Microsoft","Facebook"];
var spans = div.getElementsByTagName("span");

for(i=0;i<tags.length;i++)
{
  if(spans.includes(tags[i])){
  //Locate the span containing the text 'tags[i]' and apply 'is-active' to its classList
 }
 }
    </script>
    
    <div class="as-console-wrapper">
    <div class="as-console">
    
</div>
</div>
</body>
</html>

javascript html css

Answer 1

Answer №1

Consider the scenario where

div.getElementsByTagName("span");

is replaced with

document.getElementsByTagName("span");

, you can then experiment using the filter() method as shown below:

var s = [...spans].filter(j => j.textContent == tags[i])[0];
if(s){
  s.classList.add('is-active')
}

Demo:

.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>  
  <script type="text/javascript">
    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 tags = ["Microsoft","Facebook"];
    var spans = document.getElementsByTagName("span");

    for(i=0;i<tags.length;i++)
    {
      var s = [...spans].filter(j => j.textContent == tags[i])[0];
        if(s){
        //Find the span whose text is tags[i], and add is-active to it's classList
        s.classList.add('is-active')
      }
    }
  </script>
    
  <div class="as-console-wrapper">
  <div class="as-console">
    
</div>
</div>

Answer 2

Consider the scenario where

div.getElementsByTagName("span");

is replaced with

document.getElementsByTagName("span");

, you can then experiment using the filter() method as shown below:

var s = [...spans].filter(j => j.textContent == tags[i])[0];
if(s){
  s.classList.add('is-active')
}

Demo:

.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>  
  <script type="text/javascript">
    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 tags = ["Microsoft","Facebook"];
    var spans = document.getElementsByTagName("span");

    for(i=0;i<tags.length;i++)
    {
      var s = [...spans].filter(j => j.textContent == tags[i])[0];
        if(s){
        //Find the span whose text is tags[i], and add is-active to it's classList
        s.classList.add('is-active')
      }
    }
  </script>
    
  <div class="as-console-wrapper">
  <div class="as-console">
    
</div>
</div>

Answer 3

Answer №2

Instead of simply checking if the spans include the tag, it would be more beneficial to identify which span actually matched it. One approach is to utilize a nested for loop:

for (i = 0; i < tags.length; i++) {
    for (j = 0; j < spans.length; j++) {
        if (spans[j].textContent === tags[i]) {
            spans[j].classList.add('is-active');
        }
    }
}

If you prefer a less verbose method:

for (var tag of tags) {
    for (var span of spans) {
        if (span.textContent === tag) {
            span.classList.add('is-active');
        }
    }
}

Answer 4

Instead of simply checking if the spans include the tag, it would be more beneficial to identify which span actually matched it. One approach is to utilize a nested for loop:

for (i = 0; i < tags.length; i++) {
    for (j = 0; j < spans.length; j++) {
        if (spans[j].textContent === tags[i]) {
            spans[j].classList.add('is-active');
        }
    }
}

If you prefer a less verbose method:

for (var tag of tags) {
    for (var span of spans) {
        if (span.textContent === tag) {
            span.classList.add('is-active');
        }
    }
}

Identifying a span element and appending to its classList

Answer №1

Answer №2

Similar questions

how to display ajax response in webpage using jQuery

AngularJS: Patience for an asynchronous request

Tips on accessing the text content of a dt element with prototype

Is it possible to assign a predetermined text content to a table cell using a CSS class?

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

Animating SVG fills based on height using JavaScript

What is the best way to optimize my ExpressJS + Sequelize files for proper compatibility with Jest testing framework?

Looking to incorporate an additional column 'LastName' that can be used for filtering in the Angular data table code. This column will be included if it is present in the data

`Is there a way to transfer a GUID from a View to JavaScript?`

Choosing specific information in Typescript response

Incorporating JavaScript unit tests into an established website

What is the best way to showcase a component using FlatList?

Make sure to use jQuery to fill in any missing HTML tags in dynamic content

Designing webpages by superimposing text onto images with customizable positioning

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Ways to resolve axios promise

Custom stylesheet for individual users?

Restricting the embedding of my website to a select few domains

Is there a way to enclose a set of elements that are aligned to the