location.hrefで画面遷移ができません。

Question

質問、回答を入力し、ファイルに保存してトップページに戻るｗｅｂサイトを作成しようとしています。
（作成、運用ともサーバー環境ではなくローカル環境で行います。）

質問、回答をファイルに保存するところまではできたのですが、その後、トップページに画面遷移することができません。試しにlocation.hrefの部分で『トップページ』を『https://www.yahoo.co.jp』としても遷移しません。

何がまずいのでしょうか？よろしくお願いします。

<form>
  <p><label>質問</label><textarea></textarea></p>
  <p><label>回答</label><textarea></textarea></p>
  <p><button id="add">追加</button>
  <button id="cancel">キャンセル</button>
</form>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('add').addEventListener('click', function(){
    // 追加する処理をして、追加後に下記で画面遷移
    location.href = 'トップページ';
  });
});

Answer 1

イベントを殺してください

<script>
window.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#add').addEventListener('click', function(e){
    e.preventDefault();
    location.href = 'toppage.html';
  });
});
</script>
<form>
  <p><label>質問</label><textarea></textarea></p>
  <p><label>回答</label><textarea></textarea></p>
  <p><button id="add">追加</button>
  <button id="cancel">キャンセル</button>
</form>

ただ、location.hrefで移動するだけではtextareaのデータは渡せないので
「追加」にはなりません

Comments

[HarunoshinI]

回答くださった皆さんありがとうございます。

画面遷移前に、e.preventDefault();を追記することで解決しました。

今後とも、よろしくお願いします。

Answer 2

<button>を押した瞬間にformが送信されているからですね。

遷移させるだけなら、<form>のactionを指定すればいいだけのでは？

<form action="https://~~">

それか、<form>中で<button>にtypeを設定しない時は、デフォルトでtype="submit"となるので、
type="button"を明示的に指定してあげれば遷移は一応出来ます。

<button id="add" type="button">追加</button>

ですが、ファイルに保存した後で遷移処理をさせないといけないので、
これだけだと不十分な回答になるかもしれないので処理の流れ（全体像）を提示していただけると良いタイミングで遷移が出来そうな気がします。

Answer 3

イベントが拾えていないのでは？
ブレークポイントでも設定して確認してみると良いです。