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

where do you put all the </button> end tag ? this can be a problem — Mister Jojo
– Mister Jojo, Commented Feb 4, 2020 at 22:05
@MisterJojo You´re right, it´s a mistake in my code, I´ll change it — Pjoern
– Pjoern, Commented Feb 5, 2020 at 10:12

Mister Jojo · Accepted Answer · 2020-02-05 10:31:49Z

3

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>

answered Feb 5, 2020 at 10:31

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

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

3 Comments

Pjoern Over a year ago

Yes, this works and is a simple, slim solution. In JSFiddle I can reproduce it, in Firefox/Chrome not currently, it's probably due to my local settings. Therefore I accepted this answer.

Mister Jojo Over a year ago

@Pjoern I think you have to add a defer on your script tag or use DOMContentLoaded.or place your script under the entire html body (often chosen)

Pjoern Over a year ago

Now it works. I put the script at the end of the body.

Jeremy Harris · Accepted Answer · 2020-02-04 21:52:50Z

3

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

answered Feb 4, 2020 at 21:52

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

2 Comments

Pjoern Over a year ago

All right, thanks. That shows me the direction to keep looking.

Pjoern Over a year ago

I subsequently accepted Mister Jojo's answer, as it gave a concrete solution to my problem.

Cyril Wallis-Davy · Accepted Answer · 2020-02-05 18:10:08Z

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

Collectives™ on Stack Overflow

Use same function multiple times on different IDs in Javascript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related