ラジオボタンに連動して活性／非活性するボタンにリンクを張りたいが、対応するプログラムが分からない

前提

お世話になります。殆ど初心者に近いものですが、サイトのサンプルを参考にしながら、プログラム開発にに取り組んでいます。
先日ご教示頂いた「次へ」ボタンが活性化しない件につきましては、所期の目的は達成したのですが、更にラジオボタンに連動して活性化する「次へ」ボタンと、単独のボタン「戻る」にリンクを張りたいのですが、対応するプログラムが見つからないのでご教示頂きたく。
よろしくお願いいたします。

実現したいこと

二つのラジオボタンの内「同意する」を選択すると「次へ」ボタンが活性化して、活性化した「次へ」ボタンをクリックすると "sample.html" のページが開くようにしたい。
又、並んで設けたラジオボタンとは無関係の「戻る」ボタンをクリックすると、「index.html」のページへ戻る様にしたい。
後者は一応機能するものができていますが、「次へ」ボタンと異種のボタンになっているので、同種のものにしたい。

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

エラーメッセージはありませんが、色々調べても対応するプログラムが見つからなかったので、ご教示頂きたい。

エラーメッセージ

ありません

該当のソースコード

HTML

ソースコード

<!doctype html> <html> <head> <script> document.addEventListener('change',e=>{ goBtn.disabled=!document.querySelector('[name="a"][value="1"]').checked }); </script> </head> <body> (①)

<label><input type="radio" name="a" value="1">同意する</label><br>
<label><input type="radio" name="a" value="2">同意しません</label>　　　　
<input type="button" name="button" id="goBtn" value=" 次へ " disabled>

（②） （①）

<button onclick="location.href='index.html'"> 戻る </button>（②）

</body> </html>

試したこと

① <form id="testForm" method="get"> ～</form> は、削除しても機能に変化がないので、無くても良いのかどうか試してみた（本題とは無関係ですが...）。
② <input type="button" name="button" id="button" value=" 戻る "> を一部の修正で対応できないか色々挑戦してみましたが、ボタンの幅の寸法が変わったりうまく機能しないので、取り合えず次の様にしています
<button onclick="location.href='index.html'"> 戻る </button> ⇒ 機能的には予期したものになりましたが、少し違和感が感じられるので「次へ」ボタンと同種のボタンにしたい。

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

Adobe Dreamweaver 21.3

m.ts10806

2022/09/07 02:09

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、JavaScript必要ではないでしょうか。HTMLだけでやりきろうとしている？もう少し現状等々詳細説明願います。

A.Kameyama

2022/09/07 02:30

Javascript は、HTMLの中に一体で記入しています。「コードやエラーはマークダウンのcode機能を利用」は、コードが予期したとおりに記述されていないので、その対応策だと思うのですが、「マークダウンのcode」の意味が分からないので、ご教示頂きたく。

m.ts10806

2022/09/07 02:34

参考に提示した質問の回答を読んでも分かりませんか？一応それだけで多くは対応してもらえてるので、内容に問題はないと思っています。

行動規範の内容に同意します

回答1件

ベストアンサー

どこでつまっているのかイマイチ伝わってきませんが

javascript
1<script>
2document.addEventListener('change',()=>{
3  goBtn.disabled=!document.querySelector('[name="a"][value="1"]').checked;
4});
5window.addEventListener('DOMContentLoaded', ()=>{
6  backBtn.addEventListener('click',()=>{
7    location.href="index.html";
8  });
9  goBtn.addEventListener('click',()=>{
10    location.href="sample.html";
11  });
12});
13</script>
14<label><input type="radio" name="a" value="1">同意する</label><br>
15<label><input type="radio" name="a" value="2">同意しません</label>　　　　
16<input type="button" name="button" id="goBtn" value=" 次へ " disabled>
17<input type="button" name="button" id="backBtn" value=" 戻る ">

次へと戻るの処理を記載しました

投稿2022/09/07 03:11

編集2022/09/07 04:08

yambejp

総合スコア114843

A.Kameyama

2022/09/07 03:33

「コードやエラーはマークダウンのcode機能を利用してご提示ください。」とのご指摘があり、コードが見にくくなり申し訳ありません。「戻る」ボタンは曲がりなりにも機能しているので、特に「次へ」ボタンについてアドバイスをお願いします。（具体的な内容）ラジオボタンが２つあり、「同意する」がチェックされたときに、「次へ」ボタンが活性化します。（ここまでは出来ています）次に活性化した「次へ」ボタンをクリックすると「sample.html」のページが表示されるようにしたいのですが、この部分のプログラムの記述が分からなくて困っている状況です。よろしくご教示頂ければ幸いです。