how do i remove the onclick function after clicking once

I am very very very very new to any kind of coding whatsoever I’m talkin like I just started tonight kind of new but I still wanted to try my hand at doing things so ill try to explain best I can what I would like to do

this is like, what the first image looks like

this is my code for it:

<img src="/images/homedoll.gif" title="click me!" id="gotdam" onclick="imagefun()">

and now what I wanted to happen was that upon clicking, first it would flash into a second image while shaking, and then after a second it would change into a third image in which it should be the “final state” of the figure, so to speak

(its supposed to be a gif that flashes different colors but I’ll just put a screenshot)

this is how I coded all that weird stuff idk if I did it the most efficiently but it works:

        function imagefun() {
        var Image_Id = document.getElementById('gotdam');
        if (Image_Id.src.match("images/homedoll.gif")) {
            Image_Id.src = "images/ohno.gif";
            document.getElementById('gotdam').className = "ohnoshake"
        }
        else {
            Image_Id.src = "images/homedoll.gif";
        }
        setTimeout(gosh, 500)
    }
    
    function gosh() {
        var Image_Id = document.getElementById('gotdam');
        if (Image_Id.src.match("images/ohno.gif")) {
            Image_Id.src = "images/gosh.gif";
        }
        else {
            Image_Id.src = "images/homedoll.gif";
        }
    }

WHAT I WOULD LIKE TO DO is that after it becomes the third image, I don’t want it to be clickable anymore (because after clicking it again it just turns back to the first image and you could run the function again and I just don’t want that) and I also don’t want the image title to still say “click me” T_T idk how to cross this hurdle it just seems so small and stupid but yea I’ve met a wall.

if none of what I want to achieve is possible I guess I’ll just scrap it and try a different approach. thanks in advance for the help!

Answer

In your gosh function, after the conditional, you can remove the onclick attribute using el.removeAttribute('onclick'), this will render the image non-clickable until the page refreshes again. Then change the title attribute using el.title = ‘snarky comment’

function imagefun() {
  var Image_Id = document.getElementById('gotdam');
  if (Image_Id.src.match("https://letterstotwilight.com/wp-content/uploads/recovered/tumblr_m52lik6Nmx1qj7jmb.gif")) {
    Image_Id.src = "https://1.bp.blogspot.com/-3Yi0jVls_0s/UArdaOd0qwI/AAAAAAAAJVY/nbziWbvaNuI/s1600/cat-giving-massage-gif.gif";
    document.getElementById('gotdam').className = "ohnoshake"
  } else {
    Image_Id.src = "https://letterstotwilight.com/wp-content/uploads/recovered/tumblr_m52lik6Nmx1qj7jmb.gif";
  }
  setTimeout(gosh, 500)
}

function gosh() {
  var Image_Id = document.getElementById('gotdam');
  if (Image_Id.src.match("https://1.bp.blogspot.com/-3Yi0jVls_0s/UArdaOd0qwI/AAAAAAAAJVY/nbziWbvaNuI/s1600/cat-giving-massage-gif.gif")) {
    Image_Id.src = "https://media1.popsugar-assets.com/files/thumbor/TrU_oBggeqMKuI-aNgK81jatoG4/160x160/filters:format_auto-!!-:strip_icc-!!-:sharpen-!1,0,true!-/2014/09/02/040/n/1922507/2ba9af03f83899bf_giphy-5/i/Someone-trouble.gif";
  } else {
    Image_Id.src = "https://letterstotwilight.com/wp-content/uploads/recovered/tumblr_m52lik6Nmx1qj7jmb.gif";
  }
  document.getElementById('gotdam').removeAttribute('onclick')
  document.getElementById('gotdam').title = "So unhappy"
}

<img src="https://letterstotwilight.com/wp-content/uploads/recovered/tumblr_m52lik6Nmx1qj7jmb.gif" title="click me!" id="gotdam" onclick="imagefun()">