確認はしていませんが、submitイベントが発生してしまっているのではないでしょうか。
上記であれば
-
<button>のtype属性をbuttonにする。 -
<button>のonclick属性でfalseを返すようにする。 - clickイベントで
event.preventDefault()する。
のいずれかで対応できると思います。
Like!
location.hrefを使用してのページ遷移ができない
location.hrefでページが遷移しない
Javascriptでログインボタンを押下した際にページを遷移するというのを作ろうとしています。
その際にlocation.hrefを使っての遷移ができません。
解決方法を教えてください。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ログイン</title>
<body>
<link rel="stylesheet" href="login.css">
<form name="login_form">
<div class="login_form_top">
<h1>ログイン画面</h1>
<p>ユーザID、パスワードをご入力の上、「ログイン」ボタンをクリックしてください。</p>
</div>
<div class="login_form_btm">
<input type="id" name="user_id" placeholder="ユーザーIDを入力してください"><br>
<input type="password" name="password" placeholder="パスワードを入力してください">
</div>
<button id="loginButton" type="submit" onclick="nextPage()">ログイン</button>
</form>
<script type="text/javascript" src="login.js"></script>
</body>
function nextPage() {
// let id = document.login_form.id.value; //ID枠に入力された値（文字列）を定義
// let pwd = document.login_form.pass.value; //Password枠に入力された値（文字列）を定義
// location.href = id + pwd + ".html"; //リンク先URLを作成
location.href = 'https://www.google.com'; // googleのホームページに遷移しない
// window.open('https://www.google.com'); // こちらの方では新たなタグを生成し該当ページに移動したことを確認
}
自分で試したこと
window.openで移動したいページに移動できることは確認できたので、javascriptのソースがhtmlに埋め込まれていることは確認できました。
0
1Answer
1
Comments
@wanari
Questioner1と2それぞれ試した結果ページ遷移することができました！
ありがとうございます。