pugファイルにradio buttonを使用したページ分岐を実現させたい。

発生している問題

元々下のソースコードのようにhtmlファイルでのradio buttonを使用したページ分岐を行っていたのですが、

<form name="form1">
  <div class="piece">
    <input type="radio" name="piece" value="1" id="white" style="transform: scale(2.0);">
    <label for="white">白(先攻)<br>
    <input type="radio" name="piece" value="2" id="black" style="transform: scale(2.0);" checked>
    <label for="black">黒(後攻)<br>
   </div>
</form>
<div class="start">
  <input type="image" src="./images/Decision2.jpg" onclick="link()" alt="ゲームを開始する" >
</div>

<script type="text/javascript">
  function link() {
    var zelda = document.form1.piece[0].checked;
    if (zelda) {
      document.location = "./play_white/play.html";
    }else{
      document.location = "./play_black/play.html";
    }
  }
  </script>

htmlファイルを下のようなpugファイルに変換して使おうとしたところ、
動かなくなってしまいました。

form(name="form1")
  .piece
                              input#white(type="radio", name="piece", value="1", style="transform: scale(2.0);")
                              label(for="white") 白(先攻)
                              br
                              input#black(type="radio", name="piece", value="2", style="transform: scale(2.0);", checked)
                              label(for="black") 黒(後攻)
                                br
script(type='text/javascript').
                                  function link() {
                                  var zelda = document.form1.piece[0].checked;
                                  if (zelda) {
                                  document.location = "./play";
                                  }else{
                                  document.location = "./play_inaba";
                                  }
                                  }

エラーが表示されるのではなく、何度radio buttonで指定してページへ飛ぼうとしてもどこにも遷移せずに戻されてしまいます。一応、document.locationをwindow.openに変えれば遷移することはできるのですが、別のウィンドウが遷移するたびに作成されてしまいます。
恐らくdocument.locationを何か別のものに置き換えれば遷移しつつウィンドウも作成されない設定ができると思うのですが、何かいい案はないでしょうか？

前提・実現したいこと

radio buttonを使って条件分岐を作り、それぞれ別のPugに遷移するようにしたいです、
また、遷移する際には、新たにウィンドウが作成されないようにしたいです。

発生している問題

htmlで問題なくできていたページ遷移をPugでやろうとしたところできなくなってしまった。エラーも表示されず、ページ遷移が行われないまま元のページに帰されてしまいます。

試したこと

document.locationをwindow.location.hrefにしたりlocation.hrefにしてみたりしたがページ遷移されることはありませんでした。window.openにするとページ遷移はできるが遷移されるたびにウィンドウが作成されるため、私の思っていた動きとは違うものになってしまいました。

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

参考にさせてもらったサイトです。
http://www.shurey.com/js/samples/1_tips7.html

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

回答1件

ベストアンサー

<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image

<input type="image">って使ったことがなかったのですが、<input type="submit">と同様にサーバーへ「送信」してしまうようですね。

submitの動作については次のリンクもご参照ください。

button(type="button")を使うと送信せずにonclickのイベントの処理ができると思います。
(見た目が少し変わってしまうかもしれませんのでcssで調整が必要かもしれません)

pug
1button(type="button", onclick="link()")
2    image(src="./images/Decision2.jpg" alt="ゲームを開始する")

追記です。
buttonにすると見た目が微妙に変わってしまうため、直接imageを記述して画像をクリックした時のイベントをつけることでも対応できると思います。

pug
1            .start
2                image(src="./images/Decision2.jpg" alt="ゲームを開始する", id="image1")
3        script(type='text/javascript').
4            function link() {
5                var zelda = document.form1.piece[0].checked;
6                if (zelda) {
7                    document.location = "./play";
8                } else {
9                    document.location = "./play_inaba";
10                }
11            }
12            document.querySelector("#image1").addEventListener("click", link)