[Need help with some JavaScript] I'm using some script to display tags in the Back side of my cards along with the .replace() method to hide some of them. It works, but its container is still showing. How to fix it?

Anki Card Design
2

I simplified your code a bit. I recommend you do the following:

Add this element to your template:

<div id="tags" hidden>{{Tags}}</div>

This is best practice to get field/tag content, because it prevents issues with quotes.

Replace your script with the following


// Place all specified tag colors here
var tagMap = [
    {
        name: "test",
        color: "red",
    }
]

function addTags() {
    var container = document.getElementById("tags-container")
    var tags = document.getElementById("tags").innerText.split(" ")

    tags.forEach((tag) => {
        node = document.createElement("div")
        node.classList.add("tag")
        node.innerHTML = tag.replace("_", " ")
        if ((color = tagColor(tag)) != null) node.style.color = color
        container.appendChild(node)
    })
}

// Determine Tag Color by running through each tag
function tagColor(tag) {
    for (entry of tagMap) {
        // remove .toLowerCase() if you want it to be case-sensitive
        if (entry.name == tag.toLowerCase()) {
            return entry.color
        }
    }
}

addTags()

Add this to your Styling section:

.tag {
  display: inline-block;
  color: rgba(0,0,0, 0.65);
  font-weight: 700;
  background-color: #f0f0f0;
  opacity: 1;
  padding: .01em .3rem .1em .3rem;
  border: solid .04rem;
  border-radius: 0.1rem;
  box-shadow: rgba(60, 64, 67, 0.03) 0px 1px 2px 2px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  font-size: .7rem;
}

I made it case-insensitive because I thought that might be helpful. But you can of course remove that feature as seen in the comment within determineTagColor.

Edit: Actually, now that I think about it, you don’t even need the fallback, because you already define a default color in CSS.

I edited my code accordingly.

2 Likes