「history.back()」でページを戻った際、jsで変更された前ページのclassを再現する

Question

実現したいこと

「history.back()」で前ページに戻った際、
前ページで行われたjavascriptによるclassの変更状態を再現する。

前提

想定OSはWindows、ブラウザはChromeです。

その他のチェックボックスにチェックを入れると、<tr>のclassが「other_on」に変化します。

<tr>のデフォルトのclassは「other_off」です。

前ページ↓

<input type="checkbox" name="cancellation[]" value="その他" onclick="checkdiv(this,'other')" id="8"><label for="8">その他</label>

<tr id="other" class="other_off">
 <th></th>
 <td></td>   
</tr>

js↓

function checkdiv( obj,id ) {
	if( obj.checked ){
		document.getElementById(id).classList.remove("other_off");
		document.getElementById(id).classList.add("other_on");
	}
	else {
		document.getElementById(id).classList.remove("other_on");
		document.getElementById(id).classList.add("other_off");
	}
}

こちらはフォーム画面なのですが
現状、確認画面の「history.back()」で上記HTMLに戻ると、
その他のチェックボックスにチェックが入っていても<tr>のclassが「other_off」になっています。

チェックをつけて次ページへ遷移し、
その状態から「history.back()」してもclassが「other_on」になっているようにしたいです。

Comments

[yambejp]

「戻る」処理はブラウザによって処理が異なります。統一するのは難しいでしょう。ちなみになんのOSのなんのブラウザを想定していますか？

[vio]

yambejp様　ご質問ありがとうございます。OSはwindows、ブラウザはChromeを想定しております

Answer 1

window.addEventListener('pageshow', function(event) {
  const ev = document.createEvent('Event');
  ev.initEvent('click', true, true);
  document.querySelector('#\38').dispatchEvent(ev);
});

https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events

Comments

[vio]

x_x様
ご回答ありがとうございます！
いただいたソースで行いたい事が実現できました！

```js
window.addEventListener('pageshow', function(event) {
const ev = document.createEvent('Event');
ev.initEvent('click', true, true);
document.querySelector('td input:nth-of-type(8)').dispatchEvent(ev);
});
```

nth-of-type(8)なのは、同じような項目が複数あったためです。
ありがとうございました！