How to hide button with Javascript

Because of my initial Javascript narrow experience level, I can quite get hang of event flow. This was written in hurry, further edit possible.

I am creating cards(bootstrap cards) stack, just simply cards, and load-button. To avoid any dependency, I am going for Javascript.

I could not understand the event flow or I can not get the load-button hide.

window.onload = testCards;

function testCards() {
  var col_num = document.querySelector(".col-6");
  if (col_num < 10) {
    var loadBtn = document.querySelectorAll(".d-grid .gap-4");
    loadBtn.querySelector(".btn").classList.add("invisible");
  }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<h3>Footer card</h3>
<div class "row footer-card">
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
</div>

<div class="d-grid gap-4">
  <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

How to hide the “load-more” button when cards number is less than 10.

Answer

The were 2 issues with the code. First was with getting the count of the .card divs and the second was with the query selector for the button. Try the following where first all the elements with card classes are taken and then based on their length we hide the load button.

window.onload = testCards;
function testCards() {
    var col_num =  document.getElementsByClassName("card");
    if(col_num.length < 10) {
        document.querySelector(".btn").style.display='none';
    }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Footer card</h3>
    <div class"row footer-card">
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    </div>
    
    <div class="d-grid gap-4">
    <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *