How can I hide div if JSON does not have value?
Problem
I want that if the value in "desc" is empty, <div24> and <popup-desc> are hidden.
HTML
<div class="popup"> <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';"> <div class="div21">'+e.features[0].properties.status+'</div> <div class="popup-statusdate"> <div class="div21">'+e.features[0].properties.date+'</div> </div> </div> <img class="popup-img-icon" src="'+e.features[0].properties.img+'"onclick="window.open(this.src)" style="cursor: pointer;"/> <div class="popup-type"> <div class="div23">'+e.features[0].properties.adress+'</div> </div> <div class="popup-desc"> <div class="div24">'+e.features[0].properties.desc+'</div> </div> </div> |
buildings.geojson
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "status": "Demolished", "fill": "#C93535", "line": "#E63131", "img": "15.jpg", "date": "28.03.22", "adress": "School №51", "desc": "" }, "id": 1 }, |
I have tried something like this, but it does not work
if (e.features[0].properties.desc == ''){ popup-desc.hide(); div24.hide(); } |
Solution
You would need something like this in your script/js file. Change the display of the div that you want to hide to none
if (e.features[0].properties.desc == ''){ // Get a reference to the element const popupDiv = document.getElementsByClassName("popup-desc")[0]; // Change display to none in order to hide the element popupDiv.style.display = "none"; } |
Suggested blogs:
>How to use querySelectorAll()" with multiple conditions in JavaScript?
>How to fix mouseover event glitch in JavaScript?
>How to do light and dark mode in a website using HTML and JavaScript?
>How to manipulate manipulating Array object in JavaScript?
>How to merge an object into Array with the same key in JavaScript?
>Javascript Error Solved: Property 'id' does not exist on type 'T'
>Why highlighted table row using class not working in JavaScript?
>How to rename an object key based on the condition in JavaScript?
>How to sort an array based on another array in Javascript?
>Javascript: Modal not closing with a button