How to make a JavaScript function control two HTML IDs?

Question

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?

What you really should do is get rid of your inline onclick="whateverMethod()" and learn how to use addEventListener() — the eventListener gets the event as a parameter and you can find what exactly was clicked from event.target ... you can attach the event listener to several things based on the two (multiple) unique ids (or non-unique classes) and it can do things such as event.target.style.display = "block"; — Stephen P
– Stephen P, Commented May 15, 2019 at 22:16
Nice. i'll see what i can do as my experience right now is limited. Thanks so much for replying. — Eduardo
– Eduardo, Commented May 16, 2019 at 21:14

Barmar · Accepted Answer · 2019-05-15 21:27:51Z

2

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>

edited May 15, 2019 at 21:27

answered May 15, 2019 at 21:06

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Eduardo Over a year ago

do i pass in the id as an argument?

Barmar Over a year ago

Yes, can't you see that in onclick="contentDownloads('vipDownloads')"?

Eduardo Over a year ago

Yes, i just don`t know if it goes on the function or the var of the function, for future id's

Eduardo Over a year ago

Sorry i am not implementing this the right way because its just not doing it for the other button.

Barmar Over a year ago

Your question isn't really very clear. What do you really want each button to do with each ID?

|

doğukan · Accepted Answer · 2019-05-15 21:06:12Z

1

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";
  }
  })
}

answered May 15, 2019 at 21:06

doğukan

28.1k15 gold badges67 silver badges79 bronze badges

Comments

Igor Melekhov · Accepted Answer · 2019-05-15 21:38:59Z

1

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";
        }
   }

edited May 15, 2019 at 21:38

answered May 15, 2019 at 21:11

Igor Melekhov

3291 silver badge9 bronze badges

2 Comments

Barmar Over a year ago

this isn't passed automatically when you use onclick="...". You need to pass it as an explicit argument, e.g. contentDownloads(this)

Igor Melekhov Over a year ago

@Barmar Exactly, thank you, used to add handlers via scripts.

Domingo Sambo · Accepted Answer · 2019-05-15 21:35:15Z

0

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";
            }
        })
}

answered May 15, 2019 at 21:35

Domingo Sambo

211 bronze badge

Collectives™ on Stack Overflow

How to make a JavaScript function control two HTML IDs?

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related