How to set border color for each element inside div?

user_12079845 0
Viewed 409

I have been working on code to tag images. I was able to insert the tags and for each inserted tag a small box is created and tagname will be displayed inside. What I would like to do is, to have different color for each of the box created.

var html = "<div class='inputtag'><i class='fa fa-eye' aria-hidden='true'></i><i class='fa fa-trash-alt' aria-hidden='true'></i><span>" + input + "</span><input type='hidden' name='tag_name[]' value='" + input + "'></div>";

$('.tags').append(html);

var theColors = []
document.querySelectorAll(".inputtag").forEach((el, idx) =>
    theColors.push("#" + ((1 << 24) * Math.random() | 0).toString(16)); el.style.borderColor = theColors[idx]
)
.inputtag>i {
    margin - right: 4 px;
}

.inputtag {
    border - radius: 4 px;
    border: 1 px solid skyblue;
    color: #000;
    padding: 2px 8px;
    width: max-content;
    text-align: center;
    cursor: pointer;
    margin: 4px 4px;
    float: left;
}

In the above Javascript code i tried to get different border color for the elements inside div, but the color keeps changing after each new entry. I have attached the images below to explain it better.

Image 1:

enter image description here

In this image 1 , u can see the elements with two different colors. These colors change when i add a new element. i.e., for each element added inside the Div, the border color for each element keep changing.

Image 2 :

enter image description here

The image 2 shows the change in the border color for the elements. What i would like to have is to have different fixed colors for each of the elements inside the Div, so they don't change color on adding a new element.

Can someone help me with this problem.

css html jquery javascript
2 Answers

Try this:

        var render = document.querySelector('#tags');
        var btnAdd = document.querySelector('#btn-add');
        var tags = [];

        btnAdd.addEventListener('click', () => {
            var nameTag = document.querySelector('#name-tag');
            var color = ((1 << 24) * Math.random() | 0).toString(16);
            render.innerHTML += `
                <div class="tag" style="border-color: #${color};">
                    ${nameTag.value}
                </div>
            `;
        });
        .tag {
            border-radius: 4px;
            border: 2px solid skyblue;
            color: #000;
            padding: 2px 8px;
            margin: 4px 4px;
            float: left;
        }
    <input type="text" id="name-tag" placeholder="name tag...">
    <button id="btn-add">Add</button>
    <hr>
    <div id="tags">
    </div>

user_123755550

You can store a color code for each of your tags and retrieve them whenever you need to show those tags. Because if you refresh the page, this will reset all the colors too.

Or, you can use an array of color codes so that you can always assign those colors sequentially to the tags.

Though I would have followed the first approach.

user_94415400
Related