i am working on an assignment where clicking on a button will change the facial expression and the bg image of the button.

so when i click on the button, my text is able to change from happy - sad - happy etc. however, the code does not work the same for my image, where the image is not changing at all onclick, likewise for the changing of the mouth path, the click event listener only works on the first click(changing sad face to happy face). it does not work for subsequent clicks. may I know if anyone has any idea where i went wrong?

This is the javascript code i have now:

let buttonState = "Sad";

let toggeleButton = document.getElementById("button");
toggeleButton.addEventListener("click", function(ev){

console.log("toggle button is working");
if(ev.target.textContent === 'Sad'){

    buttonState = "Happy";
    //changing button text and image
   ev.target.textContent = "Happy";
   ev.target.background ="https://cdn.pixabay.com/photo/2016/07/10/10/54/marguerite-1507550_960_720.jpg";
   
   //step 4
   mouth.attr({
        "path" : (`M 200,150 Q 300,250 450,150`)});

    } else {

        buttonState = "Sad";
        //changing button text and image
       ev.target.textContent = "Sad";
       ev.target.background = "https://cdn.pixabay.com/photo/2014/09/21/14/39/surface-455124_960_720.jpg";

       //step 4
       mouth.attr({
            "path" : (`M 200,150 Q 300,250 450,150`)});
     }

});

For my HTML code:

<button id="button" class="button">Sad</button>