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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

javascriptのif文結果があべこべになる

akiaki-t
t-tok

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

589閲覧

投稿2022/11/08 14:27

前提

planioというredmineの派生を使用し問い合わせフォームを作ってます。
問い合わせフォームを自分のHPに埋め込み、submitボタン押下で
自動的にplanio上にチケットが作成されます。
*問い合わせフォームで選んだ値がすでに入ってる状態になります。

実現したいこと

問い合わせフォームのプルダウンで

  • <option value="11">リンゴ</option>が選ばれた時にsubjectにリンゴが入る。
  • <option value="12">メロン</option>が選ばれた時はsubjectにメロンが入る。

ようにしたいです。

参考:リンゴなりメロンなりは、下記サンプルページ下部の画像で言うと
表題「Question regarding purchase of ticket to Mars」の部分に入ります。
https://plan.io/ja/contact-form-api/

発生している問題・エラーメッセージ

if文であべこべになってしまいます。 プルダウンで <option value="11">リンゴ</option>が選ばれた時にsubjectにメロンが入ってしまい、 <option value="12">メロン</option>が選ばれた時はsubjectにリンゴが入ってしまう。

該当のソースコード

HTML

1<html> 2 <head>(省略)</head> 3 <body> 4 <form action="https://(省略)" method="POST"> 5 <label for="client-subject">件名</label> 6 <select name="custom_field_values[issue][12]" id="client-subject"> 7 <option value="11">リンゴ</option> 8 <option value="12">メロン</option> 9 </select> 10 <input name="subject" id="subject" type="hidden" /> //わざとhidden 11 </form> 12 13 <script type="text/javascript"> 14 if (document.getElementById("client-subject")) { 15 selboxValue = document.getElementById("client-subject").value; 16 let element = document.getElementById("subject"); 17 if (selboxValue === "11") { 18 element.value = "リンゴ"; 19 } else if (selboxValue === "12") { 20 element.value = "メロン"; 21 } 22 } 23 </script> 24 </body> 25</html>

試したこと

selboxValue == "11"を selboxValue === "11"にしてみましたが、変わりませんでした。
キャッシュかと思ってシークレットブラウザでやりましたが、変わりませんでした。
どなたか改善策をご教示ください。

以下のような質問にはグッドを送りましょう

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

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

int32_t

2022/11/08 15:14

> <option value="11">リンゴ</option>が選ばれた時にsubjectにメロンが入ってしまい、 このときはリンゴが入ってませんか?
akiaki-t

2022/11/08 22:31

分からないです。 ブラウザでデバッグするやり方が分からず。(F12で開発者画面出したの後のソースファイルがどれを見ても該当コードが無い)

回答1

4

ベストアンサー

そのJavaScriptコードは、ページが表示された時に一度だけ実行されるので、初回表示時はおそらく「リンゴ」でしょう。
プルダウンで「メロン」に変更しても、変更したタイミングでJavaScriptが実行されるわけじゃないので、hiddenの項目は「リンゴ」のままです。
プルダウンで変更時にJavaScriptコードが実行されるように書き直しましょう。

投稿2022/11/08 16:06

otn

総合スコア80487

Cocode, t-tok👍を押しています
t-tok❤️を押しています
t-tokを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

2022/11/08 16:51

こちらの回答が他のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

Cocode

2022/11/08 16:55

すごくいい回答です。 > プルダウンで変更時にJavaScriptコードが実行されるように書き直しましょう。 もしよろしければ、具体的なコードを例示してあげた方が親切かもしれませんm(_ _)m
akiaki-t

2022/11/08 22:44

otnさん、ヒントありがとうございます。 https://memorva.jp/memo/html/javascript_onchange_select_menu.php この記事がたぶんズバリだと思うので、夜 帰宅後に試してみます!! Cocodeさん、後押しありがとうございます! 具体的なコード、欲を言えば喉から手が出るくらい、例示が欲しいです。 今回はお二人が、私が勉強するよう仕向けてくれたと思ってるので、自分でやってみます。 優しい言葉に救われた気持ちです。 分からなかったらそう書くので、またご教示いただけますと幸いです。 *解決したらベストアンサー選択とコメント入れます!
otn

2023/01/20 08:34 編集

はい。 > 変更時にJavaScriptコードが実行されるよう という部分が書けていると言うことは、ググってコピペじゃなくて、ちゃんと自分で考えて書いたコードだと思いました。 ちゃんとしたコード(※)が書けているので、その部分だけわかれば解決できるのかなと思い、具体的なコードは書きませんでした。 ※ selboxValue に let が付いてないのが気になりますが。
akiaki-t

2022/11/09 13:47

できました! 狙い通り動いてくれて、おかげさまで解決しました。 1つ勉強になりました。 letが付いてないのは 普段VBAやシェルスクリプトを書くことが多くて javascriptはさっぱり分からず、宣言した方が良いのかしなくて良いのか迷った末の残滓です。 ほんとはした方が良いのは分かってるんですけど、使い勝手が悪くなることもあったりして、 私的効率化で作る私物コードはほとんど宣言してなくて。 助かりました。 ご教示いただきありがとうございました!
akiaki-t

2022/11/09 13:49

コード書かないままコメントしちゃいました。 解決コード(JavaScriptのみいじりました) ========================= <script type="text/javascript"> document.getElementById("client-subject").onchange = function(){ var clientSubject = document.getElementById("client-subject"); var cs = ''; if (clientSubject.value === "11") { cs = "リンゴ"; } else if (clientSubject.value === "12") { cs = "メロン"; } document.getElementById("subject").value = cs; }; </script> =========================

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。