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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

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

  • Python

    7903questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • CSS

    5758questions

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

  • HTML5

    4000questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Internet Explorer

    286questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

javascript IEで表示されない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 387

MF_19

score 19

 前提・実現したいこと

フロントエンドの知識があまりないため質問させて頂きます。

webサービスなのですが、
ブラウザの違いにより画面の表示が上手くいかない部分があります。

具体的には、chromeだと問題なく表示されるのですが、IE10(9,8)だと表示されなくなってしまいます。
(ubuntuなのでvirtualboxにIE10を入れています)
*windowsOS上のIEでも表示がされないため、virtualboxの問題は無さそうです。

下記のコードは長くなので一部を抜粋したものです。

表示されない部分

<div class='columns'>以下の部分がまるまる表示がされていません。

chromeでは問題なく表示されていることから、文法等の間違いではなく、
IE仕様に適用出来ていない点に問題があると感じています。

開発者画面について

下記の開発者画面(chrome)で確認

<td>{{request.status_name}}</td>の部分など値[test01]が取得できており、画面に表示もされています。

開発者画面(IE)で確認

最下段で値[test01]は取得できていますが、
その後にText-Empty Text Nodeと表示があり、画面には反映されていません。
この部分が問題点かと思います。

エラー

SCRIPT5007: Unable to get property 'style' of undefined or null reference
jquery.min.js, line 2 character 31689

よろしくお願いします。

 該当ソースコード 一部抜粋

<div id="table_area">
    <table class="table" id="table" style="width: 100%;">
      ...

 {% for group in group_list %}
   {% for status_id, status_name in status_display.items() %}
     <tbody class="table-body" id="table-g{{ group.id }}-s{{ status_id }}" style="display: none">
      {% for request in request_list %}
      <thead>
         ・・・

 <div class='columns'>
   <div id='div_link_{{request.id}}' class='column'>
     <a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
       onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
            document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>
          {% if request.status_id == 0 %}
            <button id="btn_add" class="animatebutton"
                 onclick="document.getElementById('overlay_update_{{request.id}}').style.visibility = 'visible';"                                                                
                 onmouseover='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-dark";'
                 onmouseout='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-info";'>                                                              
         ・・・
     </thead>
   <tbody>
 ・・・                                                                    
</div>

<div id='div_dummy_{{request.id}}' class='column' style='display: none'>
    {{request.request_name}}
    <span class='icon' style="margin-left:10px">
        <i id="icon_load" class="fa fa-refresh fa-spin"></i>
    </span>
</div>
    <td>{{request.status_name}}</td>
    <td>{{request.model_name}}</td>
    <td>{{request.arch_name}}</td>
    <td>{{request.create_at}}</td>
    <td>{{request.update_at}}</td>
  </tbody>
 </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  var loading = false;
  update_table();
  
  ・・・

  function update_table(){
    var ul = document.getElementById("ul_status");
    var items = ul.getElementsByTagName("li");

    var groups = document.getElementById("group_list");
    var selected_group_id = groups[groups.selectedIndex].value;

    for (var i = 0; i < items.length; ++i) {
        for (var j = 0; j < groups.length; ++j) {
            if(items[i].className == "is-active" && groups[j].value == selected_group_id){
                var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
                table.style="";
            } else{
                var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
                table.style="display: none";
            }
        }
    }
  }

開発者 検証画面

 開発者画面 chrome

<div id="table_area">
<table class="table" id="table" style="width: 100%;">
  <thead>・・・</thead>
 <tbody class="table-body" id="table-g1-s2" style="display: none;">

 <div class="columns">
   <div id="div_link_33" class="column">
   <a href="/check_model?page=requests&amp;model=1&amp;request=33" onclick="document.getElementById(&quot;div_link_33&quot;).style.display=&quot;none&quot;;
document.getElementById(&quot;div_dummy_33&quot;).style=&quot;&quot;;">test01</a>
 </div>

<div id="div_dummy_33" class="column" style="display: none">
test01
  <span class="icon" style="margin-left:10px">
    <i id="icon_load" class="fa fa-refresh fa-spin"></i>
  </span>

  <td></td>
  <td>light</td>
  <td>32</td>
  <td>2018-04-30 01:04:19</td>
  <td>2018-04-30 01:04:19</td>
 </tbody>
</table>

 開発者画面 IE

<div id="table_area">
  Text-Empty Text Node
    ・・・
  <table class="table" id="table" style="width: 100%;">
  Text-Empty Text Node
    ・・・
    <tbody class="table-body" id="table-g1-s2" style="display: none;">
    Text-Empty Text Node
      ・・・
      <div class="columns">
      Text-Empty Text Node
        ・・・
         <a onclick="document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";"href="/check_model?page=requests&amp;model=1&amp;request=33>
            Text - test01
          Text-Empty Text Node
            ・・・  
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/25 16:55

    タグに追加しておいてください。

    キャンセル

  • MF_19

    2018/04/25 19:24

    maisumakunさん {{request.id}}等についてはflaskというpythonのweb application flame workを使っていまして動的に変わる値を取得しています。 例えばここのページのURLが[xxx?page=requests&request=1]だった場合、ここの値は[1]になります。

    キャンセル

  • MF_19

    2018/04/25 19:27

    mts10806さん タグが最高5個まででしたので、chromeタグを削除してpythonタグを追加しました。

    キャンセル

回答 3

checkベストアンサー

+2

htmlエスケープされていて&amp;などとなってしまっているので、それをHTMLエスケープさせないようにする必要があると思います。
あと開発者画面IEのほうで気になるのが下記ですね。

<a onclick="document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";"href="/check_model?page=requests&amp;model=1&amp;request=33>

javascriptのコードがそのまま入り込んでしまっていますが、大丈夫でしょうか?
外だしされたほうが良いかと思いますし、もしそのままonclick=""内で利用するのであれば、"がかぶっていますので正しく処理が読みこれませんね。
'に変えるなど正しく認識させる対応が必要です。

 外だしサンプル

<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
       onClick='test("{{request.id}}")'>{{request.request_name}}</a>
function test(requestid){
 document.getElementById("div_link_"+requestid).style="display: none";
 document.getElementById("div_dummy_"+requestid).style="";
}


※実際はtestではなく処理名や機能名をきちんとつけてください。

というか組んでて気づいたんですが、

<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
       onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
            document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>

<a>の >  ←これ、ないですね。
そこが原因だったりして。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/01 16:37

    ご回答ありがとうございます。 現状取り急ぎ下記に修正しました。
    test01の文字が画面に出れば良いのですが、反応していません。
    ```html
    <a onclick='document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";' href="/check_model?page=requests&amp;model=1&amp;request=33">test01</a>
    ```

    キャンセル

  • 2018/05/01 16:48

    コメントではコードブロックが使えないのでコードブロックが使いたい場合は質問本文に追記してください。

    取り急ぎでは枝葉のみとなってしまい解決まで遠のくばかりなので、着実に対応してください。

    というか適当なfunctionを用意してそちらに記載する外だしの形の方が良いような。
    htmlエスケープ部分がまだ大量に残ってそうなので、その部分は対応されたほうが良いです。

    キャンセル

  • 2018/05/01 17:34

    失礼しました。ご回答ありがとうございます。
    あと、すいません。
    js,htmlをほぼ触ったことがなかったので、調べながらですがあまり理解出来ていません。

    もし可能でしたら、参考コードを見せて頂けると大変助かります。

    キャンセル

  • 2018/05/01 17:40

    それは良いのですが、申し訳ないのですが、
    さすがにボリュームもあるため全てを提示することは出来ません。

    まずは「<div class='columns'>以下の部分がまるまる表示がされていません。 」部分が今どうなっているかを教えてください。

    キャンセル

  • 2018/05/01 17:42

    htmlエスケープ部分がまだ大量に残ってる部分はjs,htmlとは関係ないところなので、ご自身で対応いただければと思います。(私の方にPython環境が手元にないですし、おそらく調べればすぐ出てきます)

    キャンセル

+2

とりあえずこうしてみてください
onClick='document.getElementById("div_link_{{request.id}}").style.display="none"'

あとはテンプレ(?)をご利用であれば、処理後の生のHTMLを表示することは
可能でしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/30 11:07

    yambejpさん
    ご回答ありがとうございます。また返信が遅くなってしまい申し訳ありません。

    頂いたコードを実行しました。
    {{request.id}}に値は入力されているのですが、画面(IE10)には表示がされませんでした。

    実行後のソースコード

    ```html
    <div class='columns'>
    <div id='div_link_33' class='column'>
    <a href="/check_model?page=requests&model=1&request=33" onClick='document.getElementById("div_link_33").style.display="none"; document.getElementById("div_dummy_33").style="";'>test01</a>

    <button id="btn_add" class="animatebutton" onclick="document.getElementById('overlay_update_33').style.visibility = 'visible';" onmouseover='document.getElementById("icon_setting_33").className = "fa fa-cog has-text-dark";'
    onmouseout='document.getElementById("icon_setting_33").className = "fa fa-cog has-text-info";'>

    <span class="icon" style="margin-top:2px; margin-left:-10px">
    <i id="icon_setting_33" class="fa fa-cog has-text-info"></i>
    </span>
    </button>

    <div id='overlay_update_33' class='overlay' style="visibility:hidden;">
    <div class="middlediv">
     ・
     ・
     ・
    ```

    キャンセル

0

みなさん、ご回答ありがとうございました。
mts10806さんに色々ヒントを頂き、追加で変更を行いました。

chromeとIE10ではstyle.displayの挙動が違う点が主な原因でした。
style.visibilityなどを使い分けて対処したところ表示がされました。

まだ完璧な挙動ではないですが今回の表示に関しては行えたので、締めさせて頂きます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    16348questions

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

  • Python

    7903questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • CSS

    5758questions

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

  • HTML5

    4000questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Internet Explorer

    286questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。