Как заставить функцию JavaScript контролировать два идентификатора HTML?

Question

У меня есть этот элемент тега кнопки

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

И имеет функцию javascript

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

Но в будущем я добавлю больше кнопок и приведу к той же функции.

Эта часть содержит идентификаторы:

<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>

Здесь вы можете увидеть, как я разработал кнопки и контент http://thpsblog.000webhostapp.com/downloads.html (css на моем хосте занимает некоторое времядля фактического обновления, может включать немного белого на белые цвета)

Функция скрывает и показывает содержимое.

Я нашел несколько решений, но все они были напечатаны в jQuery, и, к сожалению, я не знаю jQuery.

Как я мог заставить эту функцию принимать два уникальных идентификатора?

Answer 1

Создайте идентификатор элемента для переключения параметра функции и передайте его при вызове функции.

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>

Answer 2

Сделайте id param, как предлагали другие, или используйте атрибуты данных:

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

Answer 3

Если вы не хотите добавлять событие onclick в ваш html, вы можете создать массив vars и использовать цикл forEach.Иначе, вы можете использовать ответ @ Barmar.

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

Answer 4

Вы можете запрашивать элементы с помощью класса и повторять каждый

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