CODEWITHSUNDEEP
javascripthtmlcss
Fireal
Fireal

Reputation: 57

Change Background Colors of Multiple Elements with the same ID using If Statement

Not that advanced with Javascript but looking to change the backgrounds of multiple ID's based on grabbing the elements number result, running it through my if statement to determine what background color it will get and adding that class to the elements class. Struggling quite a bit on this so any help would be greatly appreciated. No jQuery please.

HTML

<ul class="listview image-listview text">
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Strength</div>
                        <span id="skill-badge" class="badge">38</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Agility</div>
                        <span id="skill-badge" class="badge">52</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Endurance</div>
                        <span id="skill-badge" class="badge">66</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Athleticism</div>
                        <span id="skill-badge" class="badge">49</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Resilience</div>
                        <span id="skill-badge" class="badge">26</span>
                    </div>
                </a>
            </li>
        </ul>

CSS

.sb-default {
    background:rgb(66, 66, 66);
    color:white;
}

.sb-terrible {
    background:rgb(71, 0, 0);
    color:white;
}

.sb-poor {
    background:rgb(192, 64, 13);
    color:white;
}

.sb-avg {
    background:rgb(223, 167, 13);
    color:white;
}

.sb-aboveavg {
    background:rgb(204, 191, 8);
    color:white;
}

.sb-good {
    background:rgb(129, 194, 8);
    color:white;
}

.sb-excellent {
    background:rgb(90, 223, 13);
    color:white;
}

Javascript

var el = document.querySelectorAll('#skill-badge');
for (var i = 0; i < el.length; i++) {
    var currentEl = el[i];
var class_name;

if (currentEl < 10) {
    class_name = 'sb-terrible';
} else if (currentEl < 25) {
    class_name = 'sb-poor';
} else if (currentEl < 50) {
    class_name = 'sb-avg';
} else if (currentEl < 75) {
    class_name = 'sb-aboveavg';
} else if (currentEl < 95) {
    class_name = 'sb-good';
} else if (currentEl < 100) {
    class_name = 'sb-excellent';
}else {
    class_name = 'sb-default';
}

el.className += ' ' + class_name;
}

============================= Updated Javascript but for some reason it still wont add a class based on the number

var el = document.querySelectorAll('.skill-badge');
var val = parseInt(el.innerText);
var class_name;

if (val < 10) {
    class_name = 'sb-terrible';
} else if (val < 25) {
    class_name = 'sb-poor';
} else if (val < 50) {
    class_name = 'sb-avg';
} else if (val < 75) {
    class_name = 'sb-aboveavg';
} else if (val < 95) {
    class_name = 'sb-good';
} else if (val < 100) {
    class_name = 'sb-excellent';
}else {
    class_name = 'sb-default';
}

el.className += ' ' + class_name;

Upvotes: 0

Views: 1071

Answers (2)

Ahmed Ibrahim
Ahmed Ibrahim

Reputation: 23

The ID must be unique.

Just name them with classes and then move to js.

The simplest way for new JS developers without using any advanced codes.

Counting how many classes found with this name:

    var number_of_elements = document.getElementsByClassName('your_class_name').length;

Now you get the number of classes you can now loop on them. For example:

var i =0;
while (i<number_of_elements) {
  document.getElementsByClassName('your_class_name')[i].style.backgroundColor= 'red';
  //selecting each class and changing it's backgroundcolor
  i++;
}

Upvotes: -1

Farhad Rad
Farhad Rad

Reputation: 577

Well I think you just misunderstood the concept of ID attribute. ID value for each element Must Be Unique. If there is duplicated ID value in a page, only the first one will be considered.

Therefore, you can give elements a common class and replace

var el = document.querySelectorAll('#skill-badge');

with

var el = document.querySelectorAll('.common-class-name');

and there you go!

Upvotes: 3

Related Questions