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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

765閲覧

JavaScriptにおけるinnerHTMLの取扱について。

switch0805

総合スコア25

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/06 07:11

編集2018/05/06 07:19

JSで特定クラスに含まれるワードを利用して動的にスタイルを変更をしようとしているのですが、うまくいきません...
具体的にはcateという名前のクラスがHTMLに9つあり、そのクラス内のinnerHTMLに付与されている地方の名前ごとにswitchでCSSを書き換える処理を分岐させています。

以下ソースです。

JavascriptSource

1function categorize(){ 2 var targets=document.getElementsByClassName("cate") 3 for(var i = 0; i < targets.length; i++) { 4 if(targets[i].innerHTML=="北海道") 5 { 6 console.log("out"); 7 } 8 switch(targets[i].innerHTML) 9 { 10 11 case "北海道": 12 targets[i].style.color="black"; 13 targets[i].style.backgroundcolor="#ffffff"; 14 break; 15 case "東北": 16 targets[i].style.color="black"; 17 targets[i].style.backgroundcolor="#eeeeee"; 18 break; 19 case "関東": 20 targets[i].style.color="black"; 21 targets[i].style.backgroundcolor="#55ccff"; 22 break; 23 case "中部": 24 targets[i].style.color="black";FFA500 25 targets[i].style.backgroundcolor="green"; 26 break; 27 case "四国": 28 targets[i].style.color="black";console.log 29 targets[i].style.backgroundcolor="#FF7F50"; 30 break; 31 case "中国": 32 targets[i].style.color="black"; 33 targets[i].style.backgroundcolor="#F0E68C"; 34 break; 35 case "九州": 36 targets[i].style.color="black"; 37 targets[i].style.backgroundcolor="FFA500"; 38 break; 39 case "近畿": 40 targets[i].style.color="black"; 41 targets[i].style.backgroundcolor="#DC143C"; 42 break; 43 default: 44 break; 45 } 46 } 47}

HTMLソースです。(該当箇所)

HTML

1<div class="flex"> 2 3 4 <div class="link"> 5 <a href="/article/30"> 6 <span class="cate"> 雑学 </span> 7 <img src="/static/img/thumbnail/74b47d4a-319c-4b07-bb5c-bb11b7b9e3e2.PAK42_syachikunoannei1323_TP_V.jpg" ></img> 8 <p>学生、サラリーマン必見!朝夕の満員列車を避ける方法 </p> 9 </a> 10 </div> 11 12 13 14 <div class="link"> 15 <a href="/article/10"> 16 <span class="cate"> 北海道 </span> 17 <img src="/static/img/thumbnail/9f43e19b-3545-4acb-956d-8294f23ad512.jpg" ></img> 18 <p>北海道旅行のすすめ(期間、予算、おすすめお土産、持ち物) </p> 19 </a> 20 </div> 21 22 23 24 <div class="link"> 25 <a href="/article/15"> 26 <span class="cate"> 関東 </span> 27 <img src="/static/img/thumbnail/ae67c2f8-eb1f-4268-aebd-0e8dffcec1e6.jpg" ></img> 28 <p>東京観光のすすめ </p> 29 </a> 30 </div> 31 32 33 34 <div class="link"> 35 <a href="/article/24"> 36 <span class="cate"> 雑学 </span> 37 <img src="/static/img/thumbnail/d7d497da-a5b9-4a13-b55d-ca712f214920.tnzatugaku3.jpg" ></img> 38 <p>わかりやすく学ぶ民泊&lt;基礎編&gt; </p> 39 </a> 40 </div> 41 42 43 44 <div class="link"> 45 <a href="/article/28"> 46 <span class="cate"> 雑学 </span> 47 <img src="/static/img/thumbnail/97ad5796-5883-4978-be89-69de1d927231.tnzatugaku7.jpg" ></img> 48 <p>わかりやすく学ぶ民泊&lt;魅力編&gt; </p> 49 </a> 50 </div> 51 52 53 54 <div class="link"> 55 <a href="/article/29"> 56 <span class="cate"> 雑学 </span> 57 <img src="/static/img/thumbnail/304f15a6-de30-4555-ac37-2c960208d763.tnzatugaku8.jpg" ></img> 58 <p>&lt;航空券を買うベストなタイミングとは?&gt; </p> 59 </a> 60 </div> 61 62 63 64 <div class="link"> 65 <a href="/article/7"> 66 <span class="cate"> 北海道 </span> 67 <img src="/static/img/thumbnail/ae0f7c09-2b0d-452e-89ab-03da13e29663.jpg" ></img> 68 <p>旅行愛好家が勧める道東のここだけは行くべき観光スポット7選 </p> 69 </a> 70 </div> 71 72 73 74 <div class="link"> 75 <a href="/article/8"> 76 <span class="cate"> 北海道 </span> 77 <img src="/static/img/thumbnail/cf61d0c2-8fd5-4557-9bef-4d17f25d964a.jpg" ></img> 78 <p>旅行愛好家が勧める道北のここだけは行くべき観光スポット </p> 79 </a> 80 </div> 81 82 83 84 <div class="link"> 85 <a href="/article/9"> 86 <span class="cate"> 北海道 </span> 87 <img src="/static/img/thumbnail/9e2672a7-e7f2-4388-ba38-35eac94a4cda.jpg" ></img> 88 <p>旅行愛好家が勧める札幌のここは行くべき観光スポット10選 </p> 89 </a> 90 </div> 91 92 93 <script type="text/javascript"> 94 categorize(); 95 </script> 96 </div>

コンソールログの出力がoutが9つだった(HTMLソース内で書き換えたい箇所は合計9つ、そしてinnerHTML内に北海道は必ず入る箇所がある)ことより、innerHTMLと文字列の比較は正しくないと推定しました。しかしどこ探してもinnerHTMLの比較についての情報がないため非常に困っております。どなたかご教授よろしくお願いいたします・

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

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

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

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

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

kei344

2018/05/06 07:13

HTMLも提示してください。
Lhankor_Mhy

2018/05/06 07:14

HTMLがないため推測になりますが、北海道などの文字の周辺にタブ文字や改行文字が入っている、ということはありませんか?
switch0805

2018/05/06 07:19

HTMLソースも併記いたしました。
switch0805

2018/05/06 07:22

Lhankor_Mhyさん、改めてソース確認したところ空白文字が混じっていました。ありがとうございました!
Lhankor_Mhy

2018/05/06 07:48

『コンソールログの出力がoutが9つだった』というのがなぜなのかちょっと分かりませんが、ご解決されたのでしたら何よりです。自己解決の入力をお願いします。https://teratail.com/help#resolve-myself
guest

回答2

0

関係は有りませんが、img要素は閉じタグ(</img>)が不要です。

js

1var targets = document.getElementsByClassName( "cate" ); 2for( var i = 0; i < targets.length; i++ ) { 3 if ( targets[i].innerHTML.trim() === "北海道" ) { 4 console.log( "out" ); 5 } 6}

投稿2018/05/06 07:37

kei344

総合スコア69364

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

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

kei344

2018/05/06 14:38

さて、コードが間違っているのかね。
guest

0

自己解決

ソースに空白文字があったため単純に比較して同値になるはずもなかった。

投稿2018/05/06 14:24

switch0805

総合スコア25

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問