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

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

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

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

HTML

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

Q&A

解決済

2回答

1367閲覧

javascriptの変数に入れて展開したい

nguyenseiji

総合スコア156

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/07/02 04:24

編集2020/07/02 05:49

『やったこと』
現在カテゴリ選択をできる機能を作成中になります

1,html領域にoptionタグでユーザーにfirstCategoliのvalueを決めてもらいます

後にfirstCategoliで選択したvalueが1の場合のみsecondCategoryをdisabled="anable"にしました

firstCategoryのvalueが2以上の場合はdisabled="disanable"になります

secondCategoryの初期値は disabled="disnable"になります

最後にsecondCategoryをab変数に入れて

Element.innerHTML = ab;で表示しております

ab変数はif文とinnerhtmlにより動的にoption情報が変動します

『問題点、質問点』
secondCategoryのoptionがサイトに表示されないです

ご指揮頂けると助かります

よろしくお願いいたします。

html,javascript

1 2 <div>カテゴリ</div> 3 4 <select name="firstCategoryName" id="firstCategoliId"> 5 <option value="1">レディース</option> 6 <option value="2"> メンズ</option> 7 <option value="3">ベビー・キッズ</option> 8 <option value="4">小物</option> 9 </select> 10 11 <script type="text/javascript"> 12 13 var categoliDecision = document.getElementById("firstCategoliId"); 14 15 16 17 18 var ab ='<select name="secondCategory" id="secondCategory" disabled="disanable">' 19 + 20 +'<option value="1">トップス</option>' 21 + '<option value="2"> ワンピース</option>' 22 + '<option value="3">ベビー・キッズ</option>' 23 + '<option value="4">小物・ゲーム</option>' 24 + 25 '</select>' 26 27 28 29 if (categoliDecision == 1) { 30 31 document.ab.innerHTML = 32 33 '<select name="secondCategory" id="secondCategory" disabled="anable">' 34 + 35 +'<option value="1">トップス</option>' 36 + '<option value="2"> ワンピース</option>' 37 + '<option value="3">ベビー・キッズ</option>' 38 + '<option value="4">小物・ゲーム</option>' 39 + 40 '</select>' 41 42 43 } else { 44 document.ab.innerHTML = 45 46 '<select name="secondCategory" id="secondCategory" disabled="disanable">' 47 + 48 +'<option value="1">リンゴ</option>' 49 + '<option value="2"> バナナ</option>' 50 + '<option value="3">ベビー</option>' 51 + '<option value="4">コップ</option>' 52 + 53 '</select>' 54 55 } 56 57 58 Element.innerHTML = ab; 59 60 61 </script>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/07/02 04:32 編集

何点か。 ・document.writeは非推奨メソッドですので他の手法を検討された方がいいかと ・「うまくいきません」ではまったくわかりませんので、具体的に、どうしたいが、こうならない、などと記載してください。 ・HTMLも記載してください。 ・ソースコードは、コードブロックを使って記載してください。 ```ここに言語を入力 コード ``` という形式です。
nguyenseiji

2020/07/02 05:50

ご連絡ありがとうございます サイド修正いたしましたので ご確認いただければ幸いです また修正する場所等ありましたら教えて頂けると助かります
Lhankor_Mhy

2020/07/02 05:53

全部やり直しとか。 さすがにひどいと思うので低評価しました。
kei344

2020/07/03 02:36

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
nguyenseiji

2020/07/03 03:02

コメントありがとうございます。 まだちょっとうまくいっていないので現在調べ中です お手数をおかけいたします
guest

回答2

0

document.writeでhtmlを整形するのは百害あって一利なしなのでやめましょう
課題などよほどの理由があればその旨主張してください

投稿2020/07/02 04:35

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/02 04:53 編集

ちなみに単純なjsの文字列連結だとしてもselectとoptionが+で繋がれていないですね
nguyenseiji

2020/07/02 05:53

ご連絡ありがとうございます 下記のコードのように修正しました +でつなぐというのは下記のコードみたいな感じであっていますのでしょうか よろしくお願いいたします。 var ab ='<select name="secondCategory" id="secondCategory" disabled="disanable">' + +'<option value="1">トップス</option>' + '<option value="2"> ワンピース</option>' + '<option value="3">ベビー・キッズ</option>' + '<option value="4">小物・ゲーム</option>' + '</select>'
yambejp

2020/07/02 06:07

+がダブっている箇所はだめです。 端的に書くと var ab1 ='<select name="secondCategory" id="secondCategory" disabled="disanable">' +'<option value="1">トップス</option>' + '<option value="2"> ワンピース</option>' + '<option value="3">ベビー・キッズ</option>' + '<option value="4">小物・ゲーム</option>' + '</select>' console.log(ab1);
yambejp

2020/07/02 06:08

これをヒアドキュメントでかくとこうできます var ab2 =`<select name="secondCategory" id="secondCategory" disabled="disanable"> <option value="1">トップス</option> <option value="2"> ワンピース</option> <option value="3">ベビー・キッズ</option> <option value="4">小物・ゲーム</option> </select>`; console.log(ab2);
nguyenseiji

2020/07/03 02:00

+について完全に理解しました ありがとうございます。
guest

0

ベストアンサー

間違えている場所等ありましたら

js

1var categoliDecision = document.getElementById("firstCategoliId"); 2 3if (categoliDecision == 1) { 4// ^ Elementが入っているはずなので真にならない 5var ab = document.querySelector().innerHTML = 6// ^ 引数がない 7 8'<select name="secondCategory" id="secondCategory" disabled="disabled">' 9 10'<option value="1">トップス</option>' 11//^ + 忘れ 12+ '<option value="2"> ワンピース</option>' 13+ '<option value="3">ベビー・キッズ</option>' 14+ '<option value="4">小物・ゲーム</option>' 15 16'</select>' 17//^ + 忘れ 18 19} 20 21document.write(ab); 22//^ 不要

質問の変更に合わせて追記

全部やり直しだなんて、ひどいと思いますよ。

html

1 <div>カテゴリ</div> 2 3 <select name="firstCategoryName" id="firstCategoliId"> 4 <option value="1">レディース</option> 5 <option value="2"> メンズ</option> 6 <option value="3">ベビー・キッズ</option> 7 <option value="4">小物</option> 8 </select> 9 10 <script type="text/javascript"> 11 12 var categoliDecision = document.getElementById("firstCategoliId"); 13 14 15 '<select name="secondCategory" id="secondCategory" disabled="disanable">' 16 + 17// ^ + 多すぎ 18 +'<option value="1">トップス</option>' 19 + '<option value="2"> ワンピース</option>' 20 + '<option value="3">ベビー・キッズ</option>' 21 + '<option value="4">小物・ゲーム</option>' 22 + 23 '</select>' 24 25 26 27 if (categoliDecision == 1) { 28// ^ Elementが入っているはずなので真にならない 29 30 var ab = document.innerHTML = 31// ^ 未定義のプロパティ。element.innerHTML の間違いでは。 32 33 '<select name="secondCategory" id="secondCategory" disabled="anable">' 34 + 35// ^ + 多すぎ 36 +'<option value="1">トップス</option>' 37 + '<option value="2"> ワンピース</option>' 38 + '<option value="3">ベビー・キッズ</option>' 39 + '<option value="4">小物・ゲーム</option>' 40 + 41 '</select>' 42 43 44 }else{var ab = document.innerHTML = 45// ^ 未定義のプロパティ。element.innerHTML の間違いでは。 46 47 '<select name="secondCategory" id="secondCategory" disabled="disanable">' 48 + 49// ^ + 多すぎ 50 +'<option value="1">リンゴ</option>' 51 + '<option value="2"> バナナ</option>' 52 + '<option value="3">ベビー</option>' 53 + '<option value="4">コップ</option>' 54 + 55 '</select>' 56 57 } 58 59 60 Element.innerHTML = ab; 61// ^ 不要 62 63 64 </script>

投稿2020/07/02 04:58

編集2020/07/02 05:52
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nguyenseiji

2020/07/02 05:51

ご連絡ありがとうございます document.querySelector().innerHTMLに引数がないとご指揮頂きましたが 調べたと事引数にはcssを入れるとありましたが今回の場合はどのような引数 を入れるべきなのでしょうか ご指揮頂ければ幸いです よろしくお願いいたします。
Lhankor_Mhy

2020/07/02 06:00

コードを変更したようなので不要です。
nguyenseiji

2020/07/03 03:02

ご連絡ありがとうございます 全部やり直し申し訳ないです サイドご提示いただいたコードを参考に 色々変更してみましたがうまくsecondcategoliが表示されないので もう少し調べてみようと思います ありがとうございます。
nguyenseiji

2020/07/09 02:36

無事できました ありがとうございました。
Lhankor_Mhy

2020/07/09 02:38

ご解決されて何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問