ポップアップの内容を切り替え

JavaScriptでポップアップ(モーダル)の内容を「次へ」「戻る」で切り替えるようにしたいのですが、これはタブの切り替えと同じ書き方をすれば可能なのでしょうか？

質問者からの補足コメント

• 近いかもしれません！
  さらに言えばボタンクリックで表示されている画像が切り替わる、それの画像ではなく文字、またはinput項目の切り替えですね。

  No.1の回答に寄せられた補足コメントです。 補足日時：2022/02/04 18:59

No.1 回答者： sukitaro 回答日時： 2022/02/04 10:13

こんなイメージでしょうか。

<button id="back">戻る</button>
<button id="next">次へ</button>
<br>
<button id="modal">ポップアップ</button>
<div id="result"></div>
<script>
const Animals = [
'犬', '猫', 'ハムスター',
],
result = document.getElementById('result');

let count = 0;

document.addEventListener('click',(e)=>{
const btnId = e.target.id;
if(btnId === 'next'){
count += 1;
count %= Animals.length;
}else if(btnId === 'back'){
count += Animals.length - 1;
count %= Animals.length;
}else if(btnId === 'modal'){
const an = Animals[count],
question = `あなたは、${an}が好きですか？`,
text = window.confirm(question)
? `あなたは、${an}が好き`
: `あなたは、${an}が好きではない`;
result.appendChild(document.createTextNode(text));
result.appendChild(document.createElement('br'));
}else{return}
},false);
</script>