时间戳

首页 > 解决方案 > 单击一次后如何删除onclick功能

javascript - 单击一次后如何删除onclick功能

问题描述

我对任何类型的编码都非常非常非常非常陌生，无论我在说什么，就像我今晚刚开始一样新，但我仍然想尝试做一些事情，所以我会尽力解释我想做的事情

这就像，第一张图片的样子

第一张图片

这是我的代码：

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

现在我想要发生的是，单击时，首先它会在晃动时闪烁成第二张图像，然后在第二张之后它会变成第三张图像，其中它应该是图形的“最终状态”，所以说话

（它应该是一个闪烁不同颜色的gif，但我只是放一个截图）

第二张图片

第三张图片

这就是我编码所有奇怪的东西 idk 的方式，如果我做得最有效，但它有效：

        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";
        }
    }

我想做的是，在它变成第三张图片之后，我不希望它再被点击（因为再次点击它后它只是返回到第一张图片，你可以再次运行该功能，我只是不'不想那样）而且我也不希望图像标题仍然说“点击我” T_T idk如何跨越这个障碍它看起来如此小和愚蠢但是是的我遇到了一堵墙。

如果我想实现的目标都不可能，我想我会放弃它并尝试不同的方法。在此先感谢您的帮助！

标签： javascripthtmlcss

解决方案

在您的gosh函数中，在条件之后，您可以使用删除onclick属性el.removeAttribute('onclick')，这将使图像不可点击，直到页面再次刷新。然后使用 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()">

推荐阅读