Question 267653 in Html Question posted in
Some basic documentation can be found here.

Html – How to hide div if json no have value

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();
}
Tags:

2

Answers


  1. 0

    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";
}
    Login or Signup to reply.
  2. 0

    Try this:

     if (e.features[0].properties.desc == '') {
        document.querySelectorAll('.popup-desc').forEach(el => el.style.display = 'none');
        document.querySelectorAll('.div24').forEach(el => el.style.display = 'none');
    }

    Note: You don’t need to hide child div div24 if the parent div .popup-desc is hidden; child div will also hide with it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search