Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
新人エンジニアです。
正しく質問できているかどうかも怪しいレベルですのでお手柔らかにお願いします。
現在、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件
0
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
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。