Skip to content
Advertisement

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

first image

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)

second image

third image

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!

Advertisement

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()">
10 People found this is helpful
Advertisement