Search code examples
javascriptjqueryconsolequeryselector

JS code not running correctly, but works on console


I'm trying to change the src of an image. I'm able to change it on console but I can't put it to work on my javascript file. The code I ran is the same as the code on my file.
Here is the excerpt of my code where it's giving me problems:

$(document).ready(function(){
    $(document).on("click", ".grid-zonaAzul div img", function(event){
        if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
            if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                var parentClass = $(event.target).parent().attr("class");
                var classDots = "." + parentClass.split(" ").join(".");
                console.log(classDots);
                document.querySelector(classDots + " > img");
                // document.querySelector(classDots + " > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
            };
        };
    });
});

And on HTML there's something like this:

<div class="grid-zonaAzul">
    <div class="linha1a coluna1a"><img src="imagens/reservaCadeiras/cadeira1.png"></div>
</div>

The var parentClass is giving me the class linha1a coluna1a, which is correct. But because I need it with dots, I'm running the line var classDots = "." + parentClass.split(" ").join("."); to turn the string to .linha1a.coluna1a. Also, the console.log
So basically I'm trying to get the only image inside de class .linha1a.coluna1a. The problem starts here, because the commented line isn't doing anything but if I run document.querySelector(".linha1a.coluna1a > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png"), it works on console.

Edit: I'm sorry, I didn't explained somethings. I have an image, when I click on it it changes to other image. This is working correctly. The code I posted was running when I clicked on the image again to replace the second image to the first image it was showing. Essentially, the first click changes the src to imagens/reservaCadeiras/cadeiraSelecionada1.png and the second click changes to imagens/reservaCadeiras/cadeira1.png.


Solution

  • I've found the problem, it was a stupid error. I never thought the problem was on something else other the first if. My code was this:

    $(document).ready(function(){
        $(document).on("click", ".grid-zonaAzul div img", function(event){
            if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
                if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
                }
                if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                    var parentClass = $(event.target).parent().attr("class");
                    var classs = "." + parentClass.split(" ").join(".");
                    console.log(classs);
                    document.querySelector(classs + " > img")
                    // .setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
                    // $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
                }
                if ($(".w3-select").val() == "sim") {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
                }
                else {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
                }
            }
        });
    });
    

    The problem was it was entering on the second if and then on the third if. This was easily corrected by using else if.

    Solution:

    $(document).ready(function(){
        $(document).on("click", ".grid-zonaAzul div img", function(event){
            if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
                if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
                }
                else if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
                }
                else if ($(".w3-select").val() == "sim") {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
                }
                else {
                    $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
                }
            }
        });
    });