Here is my code snippet that generates 4 spans within a class. When a user clicks on a span, it changes color to indicate that it has been clicked.
<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])){
//Find the span whose text is tags[i], and add is-active to it's classList
}
}
</script>
<div class="as-console-wrapper">
<div class="as-console">
</div>
</div>
</body>
</html>Once a span is clicked, it turns blue. Now, I am looking for an efficient way to identify which spans in the class have the attribute "is-active" so that the user can save their highlighted selections.