Javascript hiding objects in loop

Question

Please help me. I want to hide ext by clicking on link, but something is wrong

But I could write only this, and don't undertand why it's not working! Maybe there is another way to do it? It's every time fills the same function. to li1 li2func, therefore thereis li1 Link to jsfiddler

html:`

<div>

<div class="left">
<ul>
        <li><a id="11" href="#">one</a></li>
        <li><a  id="12" href="#">two</a></li>
        <li><a id="13" href="#">three</a></li>
    </ul>

  </div>
  <div class="right">
  <p id="1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui.
  </p>
  <p id="2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reiciendis veritatis voluptatibus optio explicabo? Dignissimos ex amet mollitia doloribus a.
  </p>
  <p id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p>
  </div>

</div>`

JS code:

var el = document.getElementsByTagName("p");
var cs = document.getElementsByTagName("a");
if(el) {
    for (i = 0; i < el.length; i++) {
        td = cs[i];
        (function (_td) {
            td.addEventListener('click', function(){
                console.log(_td);
                console.log(i);
                document.getElementsByTagName("div")[i].className +=  document.getElementsByTagName("div")[i].className ? ' invis' : 'invis';
            });
        })(td);

what does the title says? is it a question or a statement, I don't get it — vsync
– vsync, Commented May 22, 2017 at 20:07

nvioli · Accepted Answer · 2017-05-22 20:04:07Z

1

You have a few problems with your javascript. You should have noticed this error in your javascript console: "Uncaught TypeError: Cannot read property 'className' of undefined", which might have led you to discover that document.getElementsByTagName("div") is not the selector you should be using. You did the work to produce an array of p tags (inexplicably named el), but then didn't make any reference to that within the closure you built.

Here's one way to fix that problem: give your closure a second argument, and pass the p tag of the corresponding number (i) to the a tag to which you're binding the click handler. Then modify the className string of that element.

var el = document.getElementsByTagName("p");
var cs = document.getElementsByTagName("a");

if(el) {
    for (i = 0; i < el.length; i++) {
         td = cs[i];
         ptag = el[i];
          (function (_td,_el) {
        td.addEventListener('click', function(){
            console.log(_td);
             console.log(i);
             _el.className += _el.className ? ' invis' : 'invis';
        });
    })(td,ptag);
    }
}

One other thing: you'll notice that console.log(i) always produces 3 because that i is not bound to the scope of the click handler, but rather the outer scope of the for loop, so when the user clicks on one of the a tags, the loop has already completed and i will always equal 3.

answered May 22, 2017 at 20:04

nvioli

4,2293 gold badges25 silver badges40 bronze badges

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

1 Comment

Mihail Over a year ago

yes, there were a few mistakes, but i will always equal 3 - that was s real problem, I can't solve to. Thanks a lot, its really what I want to do.

Mohamed-Yousef · Accepted Answer · 2017-05-22 20:13:07Z

1

While you tagged jquery this is how can you do with jquery by using the index() of href's closest li

$('ul > li > a').on('click' , function(){
    var ThisId = $(this).closest('li').index();
    $('div.right > p:eq('+ThisId+')').slideToggle(100);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <div class="left">
    <ul>
      <li><a id="11" href="#">one</a></li>
      <li><a id="12" href="#">two</a></li>
      <li><a id="13" href="#">three</a></li>
    </ul>

  </div>
  <div class="right">
    <p id="1">
      1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui.
    </p>
    <p id="2">
      2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reiciendis veritatis voluptatibus optio explicabo? Dignissimos ex amet mollitia doloribus a.
    </p>
    <p id="3">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p>
  </div>

</div>

answered May 22, 2017 at 20:13

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

2 Comments

Mihail Over a year ago

that's greate! Thanks a lot! I hadn't ever mind this way to do!

Mohamed-Yousef Over a year ago

@user2986966 You're welcome .. jquery is much easier than pure js Have a great day :-)

TxRegex · Accepted Answer · 2017-05-22 20:25:19Z

document.getElementsByTagName will never return null, so if(el) in your code is unnecessary. An empty array will always evaluate to true. If you want i to not equal 3, then you have to add it to the closure at the moment it is 0, 1, and 2. I called it _index here:

var paragraphs = document.getElementsByTagName("p");
var links = document.getElementsByTagName("a");

for (i = 0; i < paragraphs.length; i++) {
     link = links[i];
     paragraph = paragraphs[i];
     (function (_link,_paragraph, _index) {
         _link.addEventListener('click', function(){
             console.log(_link);
             console.log(_index);
             _paragraph.classList.toggle('invis');
        });
    })(link,paragraph, i);
}

Here is a cleaner version

function init(link, paragraph, index) {
    link.addEventListener('click', function(){
         paragraph.classList.toggle('invis');
    });
}

var paragraphs = document.getElementsByTagName("p");
var links = document.getElementsByTagName("a");

for (i = 0; i < paragraphs.length; i++) {
    init(links[i], paragraphs[i], i);
}

Collectives™ on Stack Overflow

Javascript hiding objects in loop

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related