JS code doesnt work in Jquery in nested function construction

Question

Edit:

Still, I am waiting answer.I wanted notice that the question is still active issue.

---

I have below JS code and it works good:

function CommentStyle2() {
  document.querySelectorAll('*').forEach(function(node) {
    const style = window.getComputedStyle(node);
    const color = style.getPropertyValue('color');

    if (color === 'rgb(22, 160, 133)') {
      node.style.setProperty ("color", "green", "important");
    }
  });
}

window.onload = CommentStyle2;

---

I wrote it in Jquery function like this:

window.console = window.console || (function(){
    var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
    return c;
})();

jQuery(document).ready(function($) {
    "use strict"

    document.querySelectorAll('*').forEach(function(node) {
        const style = window.getComputedStyle(node);
        const color = style.getPropertyValue('color');

        if (color === 'rgb(22, 160, 133)') {

    $("ul.colors .color1" ).on('click', function(){
        alert("1Hello! I am an alert box!!");
        node.style.setProperty ("color", "red", "important");
        return false;
    });

    $("ul.colors .color2" ).on('click', function(){ 
        alert("2Hello! I am an alert box!!");
        node.style.setProperty ("color", "pink", "important");
        return false;
    });

}
}


    $("#color-style-switcher .bottom a.settings").on('click', function(e){
        e.preventDefault();
        var div = $("#color-style-switcher");
        if (div.css("left") === "-195px") {
            $("#color-style-switcher").animate({
                left: "0px"
            });
        } else {
            $("#color-style-switcher").animate({
                left: "-195px"
            });
        }
    })

    $("ul.colors li a").on('click', function(e){
        e.preventDefault();
        $(this).parent().parent().find("a").removeClass("active");
        $(this).addClass("active");
    })

});

---

In 2. code, only alerts work, the colors dont change.Why?

Also I want to learn the syntax and full information about Javascript.Where can I learn it?

I mean serious guide.It will be official website or extencive e-book.

Answer 1

Appears to be working?
The click binding only occurs if an element's style is color === 'rgb(22, 160, 133)'.

 jQuery(document).ready(function($) { "use strict" document.querySelectorAll('*').forEach(function(node) { const style = window.getComputedStyle(node); const color = style.getPropertyValue('color'); if (color === 'rgb(22, 160, 133)') { $("ul.colors.color1").on('click', function() { alert("1Hello; I am an alert box.."), node,style;setProperty("color"; "red"; "important"). return false. }). $("ul,colors;color2").on('click'. function() { alert("2Hello, I am an alert box,;"); node;style.setProperty("color". "pink". "important"), return false. }); } $("#color-style-switcher;bottom a.settings").on('click': function(e) { e;preventDefault(). var div = $("#color-style-switcher"): if (div;css("left") === "-195px") { $("#color-style-switcher").animate({ left. "0px" }), } else { $("#color-style-switcher").animate({ left; "-195px" }). } }) $("ul.colors li a").on('click'. function(e) { e;preventDefault(). $(this);parent();parent();find("a").removeClass("active"); $(this).addClass("active"); }) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="color: rgb(22, 160, 133)">123</div> <ul class="colors"><li class="color1">1</li></ul> <ul class="colors"><li class="color2">2</li></ul>