JavaScriptでclassList.toggleを使いたいです。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）JavaScriptct超初心者です。カスタムデータ属性を使って文章を変更できるようになったのですが、再度ボタンをクリックするとまたもとの文章に戻るようにclassList.toggleを使いたいです。

発生している問題・エラーメッセージ

いろんな場所にclassList.toggleを入れて試してみましたが、ボタンが動かなくなったり、何も変化がなかったりと困っています。

該当のソースコード

###JS

'use strict';
{
document.querySelector('.box').addEventListener('click',() => {
const targetNode = document.getElementById('target');
targetNode.textContent='After'

});

}

---

###HTML

<div class="box">Click</div> <h1 id = "target">before</h1>

試したこと

targetNode.classList.toggle('target');といったコードを挿入したりしてみましたが、意味がなかったです。

補足情報（FW/ツールのバージョンなど）

Vs Code, googleChromeを使っています。

Comments

[kei344]

「classList.toggle」に「もとの文章に戻る」機能は無いですよ。

Answer 1

カスタムデータ属性を使って文章を変更できるようになった

と

再度ボタンをクリックするとまたもとの文章に戻るようにclassList.toggleを使いたい

が噛み合っていません

Comments

[yambejp]

なんかわからないけど、エスパー回答

<script>
'use strict';
window.addEventListener('DOMContentLoaded', ()=>{
const targetNode = document.querySelector('#target');
targetNode.dataset["text"]='After'
document.querySelector('.box').addEventListener('click',() => {
var text=targetNode.dataset["text"];
targetNode.dataset["text"]=targetNode.textContent;
targetNode.textContent=text;
});
});
</script>
<div class="box">Click</div>
<h1 id = "target">before</h1>

[koalachan]

私の間違った質問を親切に汲み取っていただき感謝してます。いただいたコードを入れたらやりたかったように動きました。ありがとうございます！