Как получить дочерние элементы div

Question

Пользователь может, нажав кнопку, выбрать конкретный c интересующий топ. Когда это произойдет, различные блоки div станут либо видимыми, либо невидимыми в зависимости от того, есть ли в этом блоке ссылка на этот topi c.

function GetPostsByTopic(topic) {
  var area = document.getElementById("postArea");
  var topicAreas = area.getElementsByClassName("topicArea");

  for (i = 0; i < topicAreas.length; i++) {
    var children = topicAreas[i].children;

    var topics = [];
    for (j = 0; j < children.length; j++) {
      topics.push(children[j].getAttribute("asp-route-name"));
      document.getElementById("firstTest").innerHTML = children[j].toString();
    }

    var b = topics.includes(topic);
    if (b == true) {
      var parentId = document.getElementById(topicAreas[i]).parentNode.id;
      document.getElementById(parent).style.display = 'block';
    } else {
      document.getElementById(parent).style.display = 'none';
    }
  }

}

<div class="topicBox">
  <button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
  <button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>

<div id="postArea">
  <div class="post" id="post1">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Pets">Pets</a>
    </div>
  </div>
  <div class="post" id="post2">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
    </div>
  </div>
  <div class="post" id="post3">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Pets">Pets</a>
    </div>
  </div>
</div>

Проблема, насколько я могу судить, начинается рано в части JS. Я вижу, что когда do var children=topicAreas[i].children, я ничего не получаю.

Answer 1

Надеюсь, это то, что вы пытаетесь сделать. В зависимости от того, какую кнопку вы нажали, отображается соответствующий div.

function GetPostsByTopic(topic) {
    var area = document.getElementById("postArea");
    var topicAreas = area.getElementsByClassName("topicArea");
    for (i = 0; i < topicAreas.length; i++) {
        var children = topicAreas[i].children;
        for (j = 0; j < children.length; j++) {
           var parentId = topicAreas[i].parentNode.id;
           if(children[j].getAttribute("asp-route-name") === topic){
            document.getElementById(parentId).style.display = 'block';
           }else{
            document.getElementById(parentId).style.display = 'none';
           }
        }
    }
}

<div class="topicBox">
  <button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
  <button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>

<div id="postArea">
  <div class="post" id="post1">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Pets">Pets</a>
    </div>
  </div>
  <div class="post" id="post2">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
    </div>
  </div>
  <div class="post" id="post3">
    <div class="topicArea">
      <a asp-action="Topic" asp-route-name="Pets">Pets</a>
    </div>
  </div>
</div>

Answer 2

Проблема не в детях. Когда вы запускаете свой код, вы получаете ошибку "Uncaught TypeError: Cannot set property 'innerHTML' of null". Глядя на ваш код, в котором вы используете .innerHTML, мы видим, что вы пытаетесь сослаться на элемент, которого нет в этом коде:

document.getElementById("firstTest")

Теперь, после добавления этого, у вас все еще есть некоторые элементы, которые следует изменить.

• asp-action и asp-route-name недействительны HTML. Вы используете фреймворк, который требует этого синтаксиса?
• Не используйте .getElementsByClassName().
• Используйте .querySelectorAll() и Array.forEach() на результате для упрощения цикла.
• Не используйте .innerHTML, если вы не работаете со строками HTML, поскольку это может повлиять на безопасность и производительность сделать так. По возможности избегайте встроенных стилей. Их использование вызывает дублирование кода, и код сложнее масштабировать. Вместо этого используйте классы CSS и .classList API.

Не совсем понятно, что именно должно происходить при нажатии ваших кнопок, но посмотрите обновленный код ниже :

function GetPostsByTopic(topic) {
    var area = document.getElementById("postArea");
    // Don't use .getElementsByClassName() as it provides a live node list
    // and causes quite a performance hit, especially when used in loops.
    // Use .querySelectorAll() and then use .forEach() on the collection that
    // it returns to iterate over them.
    area.querySelectorAll(".topicArea").forEach(function(area){
        var topics = [];
        // No need for children, here. Again, use .querySelectorAll()
        area.querySelectorAll("*").forEach(function(child) {   
          topics.push(child.getAttribute("asp-route-name"));
          document.getElementById("firstTest").textContent = child.getAttribute("asp-route-name");
        });
       
        if (topics.indexOf(topic) > -1) {
          // Don't use inline styles if you can avoid it.
          // Instead use pre-made classes.
          area.classList.add("hidden");
        }
        else {
          area.classList.remove("hidden");
        }
    });
}

/* Use CSS classes when possible instead of inline styles */
.hidden { display:none; }

<div class="topicBox">
        <button class="topicButton" onclick="GetPostsByTopic('Pets')">Pets</button>
        <button class="topicButton" onclick="GetPostsByTopic('Vacation')">Vacation</button>
</div>
<div id="postArea">
        <div class="post" id="post1">     
            <div class="topicArea">
                <a asp-action="Topic" asp-route-name="Pets">Pets</a>
            </div>     
        </div>
        <div class="post" id="post2">
            <div class="topicArea">
                <a asp-action="Topic" asp-route-name="Vacation">Vacation</a>
            </div>
        </div>
        <div class="post" id="post3">
            <div class="topicArea">
                <a asp-action="Topic" asp-route-name="Pets">Pets</a>
            </div>
        </div>      
</div>

<div id="firstTest"></div>