infowindowの文字の一部だけ色を変更したいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
新人エンジニアです。
正しく質問できているかどうかも怪しいレベルですのでお手柔らかにお願いします。
現在、google map apiを利用したwebサイトを作成しています。
DB.phpからjsonデータを引っ張ってきており、そのデータを利用してinfowindowを作成しています。
[jsonデータ={golfid,naviid,name,url,holecount,greencount,ipad_sum,lat,lon}]
またinfowindowのcontentに<a href="${markerData[i]['url']}">${markerData[i]['name']}</a>+'<br><br>'+
'<div id="holecount" display:inline-block;_display:inline;">'+markerData[i]['holecount']+'H'+'</div>'+
'<div id="greencount" display:inline-block;_display:inline;margin-right:20px;">'+markerData[i]['greencount']+'G'+'</div>'+
'カート:'+markerData[i]['ipad_sum']+'台'を代入しています。

あるholecount(数字)の時だけinfowindowの文字の色を変えたいです。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

Uncaught TypeError: Cannot read property 'style' of null

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navi Map</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="navimap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
</head>
<body>
         <div id="header">iGolfShaper </div>
         <table cellpadding="0px">
           <tr>
             <td width="30%" style="margin-top:2px;">
              <div id="sidebar">
                
                <div id="golf">
                <table style="width:100%;heigth:100%;" id="foo-table">
                <thead>
                <tr><th>CD</th><th>name</th></tr>
                </thead>
                <tbody id="saku" class="saku1">

                </tbody>
                </table>
                </div> 
              </div>
            </td>  
             <td width="70%" ><div id="map"></div></td>
           </tr>
         </table>
<script src="https://maps.googleapis.com/maps/api/js?key="" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>   
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>  
<script src="infobox.js"></script>
<script>
   var target = document.getElementById('map');　
   var centerp = {lat: 36.414426 , lng: 139.049106};

  window.addEventListener('DOMContentLoaded',function initMap() {
    map = new google.maps.Map(target, {
      center: centerp,
      zoom: 5.7,
    });
    
  });
  var markerD = [];

// DB情報の取得(ajax通信)

// windowオブジェクト(windowオブジェクトの主要なオブジェクトはdocumentオブジェクト,locationオブジェクト),addEventListener()『対象要素.addEventListener(種類、関数、false)』,『イベントを実行することができるメソッド』、DOMContentLoaded『webページを読み込みが完了し時に発動』
window.addEventListener('DOMContentLoaded', function(){
  $.ajax({
    type: "POST",
    url: "DB.php",
    dataType: "json",
    success: function(data){
      markerD=data;
      setMarker(markerD);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
      alert('Error : ' + errorThrown);
    }
  });
});








var map;
var marker = [];
var infoWindow=[];

function setMarker(markerData) {


      // console.log(markerData.length);
      // 配列(markerData)をgolfid順に並び替える。
      const copymarkerData=markerData.sort((a,b) => a.golfid - b.golfid);

      $("#foo-table").DataTable({
        // lengthChange: false,
        data: markerData,
        columns: [
            { data: 'naviid' },
            { data: 'name',
                render:function(data,type,row,meta){
                    return `<a href="javascript:myclick(${meta.row})">${data}</a>`;
                }
            }
        ]    
    });
      
     
   

      var icon;
      var sidebar_html= " ";
      var url="";
      var infobox=[];
      var contents="";
      var content="";

      for (var i = 0; i < markerData.length; i++) {
        
            var latNum = parseFloat(markerData[i]['lat']);
            var lngNum = parseFloat(markerData[i]['lon']);

            // マーカーの位置セット
            var markerLatLng= new google.maps.LatLng({
              lat:latNum,
              lng:lngNum
            });
            
            // google.maps.Markerクラスのオブジェクト(marker[i])を作成かつマップ上にマーカーを作成。
            marker[i] = new google.maps.Marker({
                        position:markerLatLng,        // マーカーを立てる位置を指定
                        map: map,                        // マーカーを立てる地図を指定
                        icon: icon                       // アイコン指定
            　　 });

            
            content=`<a href="${markerData[i]['url']}">${markerData[i]['name']}</a>`+'<br><br>'+
                     '<div id="holecount" display:inline-block;_display:inline;">'+markerData[i]['holecount']+'H'+'</div>'+
                     '<div id="greencount" display:inline-block;_display:inline;margin-right:20px;">'+markerData[i]['greencount']+'G'+'</div>'+
                     'カート:'+markerData[i]['ipad_sum']+'台'
                     



          //  var infobox[i]= new infoBox(infoboxOptions);
           
            // google.maps.InfoWindowクラスのオブジェクト(infoWindow[i])を作成。
            infoWindow[i] = new google.maps.InfoWindow({
            content:content
          });
          

            // サイドメニューに要素を追加
            

          sidebar_html +="<tr>"+"<td>"+markerData[i]['naviid']+"</td>"+"<td>"+'<a href="javascript:myclick(' + i + ')">' + markerData[i]['name'] +"</a>"+"</td>"+"</tr>";
          
            markerEvent(i);

            if(markerData[i]['holecount']=36){
              document.getElementById('holecount').style.color="red";

            }

           
         
      };
      

    document.getElementById("saku").innerHTML = sidebar_html;
}  ; 


var openWindow;
// マーカーをクリックした際の関数
function markerEvent(i) {
        marker[i].addListener('click', function() {
          myclick(i);
        });
      }
function myclick(i) {
        if(openWindow){
          openWindow.close();
        }
        infoWindow[i].open(map, marker[i]);
        openWindow = infoWindow[i];
      }


</script> 
</body>
</html>

試したこと

for文中に if(markerData[i]['holecount']=36){
document.getElementById('holecount').style.color="red";
}を作成し、holecountが３６の時にIDがholecountの<div>の文字色を赤に変更するようにコードを変更したのですがエラーが表示されます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

HTMLの基本的なルールでid属性は1タグに対して1つの値しか使用できません
処理を見てみますと複数に対して同じ"holecount"という値を使用しています。
もし同じ名前が必要な場合Nameを使います。

'<div id="holecount" display:inline-block;_display:inline;">'+markerData[i]['holecount']+'H'+'</div>'+

これではgetElementByIdの時タグを特定することができません。

HTML
1document.getElementById('holecount').style.color="red";

この事はメソッドの名称からも判ります
・getElementById // Element 単数形
・getElementsByName // Elements 複数形

'<div id="holecount' + i + '" display:inline-block;_display:inline;">'+markerData[i]['holecount']+'H'+'</div>'+

HTML
1document.getElementById('holecount' + i).style.color="red";

などで対応してみて下さい。

投稿2020/09/22 23:03

kuma_kuma_

総合スコア2506

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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