Use same function multiple times on different IDs in Javascript

Question

I want to apply one and the same function multiple times on a page, each time to elements with their own ID (to show and hide elements). When I apply the function without specifying IDs, all elements all over the document would change. So do I have to specify the function multiple times in the Javascript file, each with its own ID, or is it possible to get the ID somehow at runtime?

HTML

<button onclick="switchIt_stahlherstellung">switch</button>
<div id="stahlherstellung">
  show/hide stuff  
</div>

<button onclick="switchIt_produkte">switch</button>
<div id="produkte">
  show/hide stuff
</div>

and so on.

Javascript

function switchIt_stahlherstellung() {
  if (document.getElementById('stahlherstellung')) {
      if (document.getElementById('stahlherstellung').style.display == 'none') {
          document.getElementById('stahlherstellung').style.display = 'block';
      }
      else {
          document.getElementById('stahlherstellung').style.display = 'none';
      }
  }
}

function switchIt_produkte() {
      if (document.getElementById('produkte')) {
          if (document.getElementById('produkte').style.display == 'none') {
              document.getElementById('produkte').style.display = 'block';
          }
          else {
              document.getElementById('produkte').style.display = 'none';
          }
      }
    }

Answer 1

You need to learn more about functions, and specifically parameters .

For example:

function switchIt_stahlherstellung(id) {
  if (document.getElementById(id)) {
      if (document.getElementById(id).style.display == 'none') {
          document.getElementById(id).style.display = 'block';
      }
      else {
          document.getElementById(id).style.display = 'none';
      }
  }
}

Then you can call that single function like:

switchIt_stahlherstellung('einheiten_stahlherstellung');

Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Answer 2

simple css/JS mix solution:

 document.querySelectorAll('button.switcher').forEach(bt=>{ bt.onclick=()=>bt.classList.toggle('DivHide') })

 button.switcher.DivHide + div { visibility: hidden; } /* or-> display: none; <- */

 <button class="switcher">switch</button> <div id="stahlherstellung"> show/hide stuff </div> <button class="switcher">switch</button> <div id="produkte"> show/hide stuff </div>

Answer 3

There is an easier way to do your job without all these "ifs" and without query and map all your buttons. In your html to "onclick" at the call of your function you pass in argument the id of the dive that you want to show or hide. To your div add two "class" one to manage the display and the other to style your div.

html

<button onclick="switchIt('stahlherstellung')">click</button>
<div id="stahlherstellung" class="hidden my-styled-div">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
        enim unde dolor aperiam pariatur architecto recusandae quibusdam
        deleniti modi culpa voluptas adipisci totam atque, laboriosam quis eos
        nobis obcaecati reprehenderit.
    </p>
</div>

<button onclick="switchIt('produkte')">click</button>
<div id="produkte" class="hidden my-styled-div">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
        nostrum distinctio nisi vero unde molestias earum sunt quasi similique 
        a sint, perspiciatis recusandae fugit et omnis totam provident numquam
        exercitationem!
    </p>
</div>

A little css for example.

css

button {
    padding: 5px;
    border: 1px solid black;
}

.my-styled-div {
    margin-top: 50px;
    width: 100vw;
    background-color: #808080;
    padding: 10px;
}

.hidden {
    display: none;
}

And the function.

You get the argument passed to the function call which allows you to select your div by its "id" and add a "toogle" on the hidden class.

javascript

function switchIt(id) {
    document.getElementById(id).classList.toggle("hidden");
}