ajaxでpostをポストしたあと、``onclick``の中身を変更したい

Question

#実現したい事
下記のbuttonは、クリック時にajax呼び出しています。
buttonはトグルっぽい感じにイメージしていて、1回目のajaxはPOST処理しています。
1回目のPOST時にbuttonのonclickを変更したいと考えています。
そのため、jsで要素を取得して.onclickでonclickの中身を変えようとしているのですがうまくいかなくて困っています。

//デフォルトのbuttonのonclickの中身
button id="LikeBtn" onclick='Like_like("#{a.id}")'
//ajaxでポストした後にonclickの中身を``Destory_like``に変更したい
button id="LikeBtn" onclick='Destory_like("#{a.id}")'

//ajax処理
、、、
success: function (data) {
let btn = document.getElementById('LikeBtn');
btn.onclick = new Function(`Destory_like(${data.id});`);
},
、、、

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[nanase21]

すいませんでした。質問にやりたいことを追記しました。

[yambejp]

onclickがタグに直書きされているのでしょうか？
また$.ajaxのsuccessは使わずdoneで処理してください

Answer 1

clickイベントでonclickをいじるのはどうかと思いますが

$(function(){
  $('#LikeBtn').on('click',function(){
    $(this).attr('onclick',null);
  });
});

をした上で、Like_like()とDestory_like()の付替えをするか
そもそもonclickを付け替えずにLike_like()の中から
Destory_like()を呼び出すか呼び出さないかでトグルするのが妥当では？

Comments

[nanase21]

返信遅くなり申し訳ございません。
ご教示いただきありがとうございます。
おっしゃる通り、本来であればトグルで対応するべきですがonclickの中身を書き変える方法を知りたく質問させていただきました。

Answer 2

コードスニペット

イベントハンドラ内で、サブハンドラを切り替える

var subHandlers = [
  function(event){ console.log( "偶数" ) }
, function(event){ console.log( "奇数" ) }
];

var current = 0;
var mainHandler = function( event ) {
  var idx = current % 2;
  subHandlers[idx]( event )

  current++;
};
button.addEventListenr("click", mainHandler );

回答させていただくコードは、ヒントとして例示するに留めます。

---

古い教材を参考にされているのか、質問のコードが1997年前後のソレですね。
今は 要素のon〜属性にイベント記述しないですし、 new Function() も使わないです。

まずは addEventHandler(), removeEventListener() を使いこなすことを目標にトライ＆エラーの経験を積みましょう。

例示したコードの処理内容が分かるはずです。