CODEWITHSUNDEEP
javascripthtmlcss
Eduardo
Eduardo

Reputation: 294

How to make a JavaScript function control two HTML IDs?

I have this button tag element 

<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

And has a javascript function

      function contentDownloads() {
        var x = document.getElementById("vipDownloads");
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }

But, in the future I will include more buttons and would lead to the same function.

This is the part that contains the IDs:

<div id="vipDownloads" class="collapse show" style="display: none;">     
<div class="card-body">
<h5 class="card-title">Map Pack v 1.8 <span class="caption-entry">by cWaLker</span> </h5>
<p class="card-text">
Aight Fellas,
Map Pack v 1.8 introduces some revived classics and under the radar stunners. <br>
<br> 1.7 went on a diet and dropped some restraining pounds.
For this nugget to work stable, you'd need to remove your own user folder first and then drop the User folder from the 1.8 bulk package.. it will serve you everything you need anyways ;-)<br>
<br> Have Fun Guys lets kick some flips!              
</p>
<a href="https://drive.google.com/open?id=1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9" target="_blank"><button type="button" class="btn btn-outline-success">Download</button></a><br>           
</div>
</div>

You can see here how I designed the buttons and content http://thpsblog.000webhostapp.com/downloads.html (the css on my host takes a while to actually update, might include some white on white colors)

The function hides and unhides content.

I have found some solutions but they were all typed in jQuery, and unfortunately I do not know jQuery.

How could I make this function take two unique ids?

Upvotes: 3

Views: 390

Answers (4)

Igor Melekhov
Igor Melekhov

Reputation: 329

Make id param as others suggested or use data attributes:

<button class="btn btn-link" type="button" onclick="contentDownloads(this)" data-downloadsid="vipDownloads">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

function contentDownloads(element) {
        var x = document.getElementById(element.dataset.downloadsid);
        if(x == null) return;
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
   }

Upvotes: 1

Domingo Sambo
Domingo Sambo

Reputation: 21

You can query the elements with a class and iterate each

<div class="download-element">Element 1</div>
<div class="download-element">Element 2</div>
<div class="download-element">Element 3</div>

<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

function contentDownloads() {
    document.querySelectorAll('.download-element')
        .forEach(element => {
            if(element.style.display === "none") {
                element.style.display = "block";
            } else {
                element.style.display = "none";
            }
        })
}

Upvotes: 0

Barmar
Barmar

Reputation: 780889

Make the ID of the element to toggle a parameter of the function, and pass it when you call the function.

function contentDownloads(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<button class="btn btn-link" type="button" onclick="contentDownloads('vipDownloads')">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

Upvotes: 2

doğukan
doğukan

Reputation: 27389

If you don't want to add an onclick event to your html, you can create a vars array and use a forEach loop. Else, you can use @Barmar's answer.

function contentDownloads() {
  var x = document.getElementById("vipDownloads");
  var y = document.getElementById("y");
  var z = document.getElementById("z");

  vars = [x,y,z]; // update this array when selected a new element

  vars.forEach(function(p){
      if (p.style.display === "none") {
    p.style.display = "block";
  } else {
    p.style.display = "none";
  }
  })
}

Upvotes: 1

Related Questions