How to assign background color through JS (same as IMG bg), depending on database value (sex)-CodePudding

Visualisation:

[IMG] [HIDDEN INPUT]-—-[TEXT]-—-[ICON]
[IMG] [HIDDEN INPUT]-—-[TEXT]-—-[ICON]
[IMG] [HIDDEN INPUT]-—-[TEXT]-—-[ICON]

(For each user)

I want to give the icon on the right the same background color as the IMG on the left. The image is an SVG avatar from Dicebear.

The idea is if a user is male (sex===M), their avatar has a blue background, and if female; a pink one. I'm trying to give the icon on the right of the text the same background color.

I've tried doing it through a hidden input with their gender as the value (M, F, O), and running that through a Javascript function on pageload;

    function recolor() {
    var x = document.querySelectorAll(".fa-icon");

    for (let i = 0; i < x.length; i  ) {
      let sex = document.getElementById("sex").value;
      let background;
      if (sex === "M") {
          background = "blue";
      }
      else if (sex === "F") {
          background = "pink";
      }
      else {
          background = "yellow";
      }
      x[i].style.backgroundColor = background;
    }
  }

This got me varying results, from all icons pulling the background from the last else, to them just pulling it from their standard in CSS (which shouldn't happen, as DOM manipulation is supposed to overrule that, right?)

I'm not that good with Javascript yet, and have tried multiple different versions of this here code, all leading to different results.

Chance is quite high that I'm glancing over something incredibly simple. Any help is welcome!

Edit (the HTML):

<div >
  <div>
    <img src="https://avatars.dicebear.com/api/avataaars/profile.svg?<?php echo $user->pf_settings ?>">
    <input type="hidden" name="sex" id="sex" value="<?php echo $user->sex ?>">
  </div>
  <div>
   <p><?php echo $user->text; ?></p>
  </div>
  <div>
   <i ></i>
  </div>
 </div>

CodePudding user response：

You could use a lookup table and loop over the inputs

const colors = {
  "M": "blue",
  "F": "pink",
  "O": "yellow"
};
const genders = document.querySelectorAll("[name=gender]");
genders.forEach(gender => {
  const genderValue = gender.value || "O";
  const color = colors[genderValue];
  gender.closest("div.container").querySelector(".fa-icon").style.backgroundColor = color;
})

img {
  height: 100px;
}

<div >
  <div>
    <img src="https://avatars.dicebear.com/api/avataaars/profile.svg">
    <input type="hidden" name="gender" value="M">
  </div>
  <div>
    <p>Text</p>
  </div>
  <div>
    <i >Avatar</i>
  </div>
</div>
<div >
  <div>
    <img src="https://avatars.dicebear.com/api/avataaars/profile.svg">
    <input type="hidden" name="gender" value="O">
  </div>
  <div>
    <p>Text</p>
  </div>
  <div>
    <i >Avatar</i>
  </div>
</div>

CodePudding user response：

You can use the following CSS selector,

#sex[id='M'] ~ .fa-icon { background-color: green; }
#sex[id='F'] ~ .fa-icon { background-color: red; }
#sex[id='O'] ~ .fa-icon { background-color: blue; }