How to reuse this js in other elements

Question

How to reuse this js in other elements

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

-1

I do not have much knowledge in JS, but I got this function that does exactly what I need, but when I duplicate the html div that uses this same function js it does not work, I had seen somewhere that the document executes the first time and does not allow reuse function, could anyone help me with this? Hug.

 <script>


   var c = document.getElementById("btn");

    c.addEventListener('click',function(){
      var elemento = document.getElementById("section3");
      if(elemento.style.height !== '100%')
          elemento.style.height = '100%', elemento.style.transition = '.5s';
      else
          elemento.style.height = '90px';
    });


</script>

javascript

asked by anonymous 23.01.2017 / 19:19

3 answers

Listview of images and quantity - Android [closed] How to make multiple values in a single option and retrieve them

score 2 · Answer 1

You are associating an anonymous function for the click event of the element with id btn . The id is must be a single element on the page , there can not be two or more elements with equal IDs, otherwise things start to bugar. So in your case, it would be ideal to link the function through the class attribute, since it can repeat the wish.

Solution

Change the elements with the btn and section3 IDs to use this as a class. You can remove these IDs or just add class with the same value as id .

After this, change your code to use getElementsByClassName instead of getElementById . Warning: getElementsByClassName can find more than one element, so it will always return a collection, take a look at the documentation / a>.

score 0 · Answer 2

You can add an event handler to all buttons where the handler switches a class that gives visibility to your session.

Here's an example:

var btns = document.querySelectorAll('.toggle'),
    i, l;

function click_listener() {
  this.parentElement.classList.toggle('show');
}

for(i=0, l=btns.length ; i<l ; i++){
  btns[i].addEventListener('click', click_listener);
}

.teste {
  border: #ccc solid 1px;
  padding: 8px;
  height: 90px;
  overflow: hidden;
}

.teste.show {
  height: 100%;
}

<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>
<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>
<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>

score 0 · Answer 3

I do not know if I understood correctly what you wanted but you could use prototype in javascript to be able to make reusable components. I kicked off with a very simple component, but nothing prevents you from improving it so it's the way you want it. See if this is what you need, if it is not, be more specific that I can help you better. link