if文の中にjQueryを書いても反映されない問題
解決済
回答 3
投稿
- 評価
- クリップ 0
- VIEW 403
やりたい事は、ボタンをクリックするとresult.htmlにとんでテキストを表示させる事です。ページ移動は成功しますが、文字表示がうまくいきません。if文の中にjQueryでclick処理をする記述が怪しいと思うのですが、どこが間違っているのかわからないので教えて欲しいです。
<body>
<p><input id="choice1" type="button" value="ボタン1" onclick="location.href='result.html'; stimu_(stimu1)"></p>
<p><input id="choice2" type="button" value="ボタン2" onclick="location.href='result.html'; stimu_(stimu2)"></p>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
</body>// 回答をresult.htmlに送信
function stimu_1(stimu1) {
document.write("<div>"+stimu1+"</div>");
}
function stimu_2(stimu2) {
document.write("<div>"+stimu2+"</div>");
}
if($("#choice1").click(function(){
var stimu1 = 1;
return stimu1;
}));
if($("#choice2").click(function(){
var stimu2 = 2;
return stimu2;
}));-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
if文の中にjQueryでclick処理をする記述が怪しいと思うのですが
あやしいと思うなら、if取っ払いましょう。
あくまでセレクタに対するイベント付与を行うものなので、ifで評価する意味は全くありません。
returnしてもイベントを終了するだけで受け取りがないように思いますし、1とか2とか返してもifで評価されるのはあくまで式のtrue/falseです。
「どう使いたいか」によってイベント付与のタイミングを分けたいということなのでしょうか。要件を整理してみてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
全体的に間違ってます
onclick内の「stimu_(stimu1)」という表現は
stimu_()という関数にstimu1という変数を渡す処理です。
stimu_()関数が用意されていないのでエラーになります
location.hrefでページ遷移した後に関数を実行するのも意味がありません
「文字表示がうまくいきません」というのは遷移後に
document.writeで表示するのですか？
ちょっとなにがしたいか理解できません
$("#choice1").click()をifの中に置くのはNGです
var stimu1に1をいれてstimu1をreturnしてもstimu1がグローバル変数として
挙動することはありません
構文的にもifが条件だけあって実行文がないように見受けられます
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
ご希望のことは、ボタンクリックで移動した先のページを、前のページでどのボタンを押したかによって表示を変更したいということでしょうか。
だとしたら、コードの基本的な間違いもありますが、それ以前に、考え方も間違っています。
JavaScript(jQuery)はそのページだけで有効で、ページ移動したらコードや変数はすべて破棄されます。
もし、移動先のページも操作できたらセキュリティ上危険ですよね。
ということで、下記のような考え方になります。
- ページ移動するときに次のページに値を受け渡す。
- 次のページで値を受け取っで、それをもとにページ内に表示する。
値の受け渡しの方法はクッキーとかローカルストレージとかいろいろありますが、
URLパラメーターを使うのが比較的簡単です。
URLパラメーターとはURLの最後に、?パラメータ名=値 というように付加したものです。
（そのようなURLをよく見かけますよね。）
元ページのHTML
<p><input id="choice1" type="button" value="ボタン1" onclick="location.href='result.html?stimu=1'"></p>
<p><input id="choice2" type="button" value="ボタン2" onclick="location.href='result.html?stimu=2'"></p>
移動先のjs
var param = location.search;
if(param == "stimu=1") {
document.write("<div>1</div>");
} else if(param == "stimu=2"){
document.write("<div>2</div>");
} これで、location.searchで stimu=1 か stimu=2 を受け取れますので、
それでif文で表示を変更すればいいでしょう。
（ちなみに、document.write は非推奨なんですが、現状はそういうスキルレベルではなさそうなので）
jsの文法は一から勉強してください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
yoorwm
2019/09/17 10:13 編集
他の方が回答されているように基本的な構文から滅茶苦茶なので、基本から真面目に勉強なさる方が良いかと思います。
後、「何をしたいのか？」も明確で無いので、要件を明確にする練習もされると良いかと思います。