我很困惑为什么这个javascript没有改变我的h2元素的颜色

我试图根据早期选择的男性或女性为所有strong和h2标签上色。我已经对以前的li和a标签做了这样的操作，所以我不明白为什么这样做不起作用。我必须去买一个橡皮鸭b/c我被困了一段时间，这似乎太容易了

CSS:

Javascript传入男性/女性字符串，此代码确实被击中b/c其他内容被着色：

function SetGender(e)
{
    sessionStorage.gender = e;

    if (sessionStorage.gender == "male") {
        document.getElementById("category-list").className += " colorBlue";
        //..many other class/id color changes

        //Change H2/Strong tag color color
        $("#adviceBodyDisplay h2").addClass("colorBlue");
    }
    else if(sessionStorage.gender=="female") {
        document.getElementById("category-list").className += " colorPink";
        //..many other class/id color changes

        //Change H2/Strong tag color color
        $("#adviceBodyDisplay h2").addClass("colorPink");
    }
}

HTMLSUFF：

<div id="adviceBodyDisplay">
  <h2>Real Life Example 1:</h2>
  <p>other text</p>
</div>

---

没有ID类别列表中的元素，所以Javascript在进行颜色更改之前就崩溃了

为什么要混合.className+=native和.addClassjQuery？为什么不选一个呢？旁注，你应该有一个空格才行！重要的是你能提供一个，请？顺便说一句-给你的类名一个良好的语义含义。。colorPink和colorBlue很可怕-如果你必须为色盲的人更改CSS类，该怎么办？最好说maleDecoration和femaleDecoration或其他有意义的东西。如果我删除了对您发布的HTML中不存在的元素的引用。浏览器控制台中有错误吗？

<div id="adviceBodyDisplay">
  <h2>Real Life Example 1:</h2>
  <p>other text</p>
</div>