質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

解決済

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

mariko68311
mariko68311

総合スコア10

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1回答

0リアクション

0クリップ

550閲覧

投稿2022/01/14 07:42

編集2022/01/14 08:04

発生している問題

元々下のソースコードのように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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。