-2

var desc = document.querySelectorAll(".desc");

function change() {
    var how = desc.length;
    
    for(var i = 0; i < how; i++) {
        desc[i].getElementsByTagName("p")[1].style.display = "none";
    }
}

change();

function show(e) {
    var target = e.target;
    
    console.log(target);
}

for(var i = 0; i < desc.length; i++) {
    desc[i].onclick = show;
}
.desc {
    width: 80%;
    margin: 0 auto;
    border: 3px solid #cccccc;
    padding: 5px;
    margin-bottom: 10px;
}
<div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>
            
            <div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>
            
            <div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>

I have problem: I get the target but I don't want a paragraph, but div with class .desc. And then I want to refer to this target and choose children. How I can do it? So, when someone clicks in this this or the text inside this div, I want to get in target only this div with class desc.

Douglas
  • 1,304
  • 10
  • 26
loczek
  • 123
  • 1
  • 6

1 Answers1

0

Even if you have set the onclick event for the <div> element you actually trigger the onclick event in the child <p> element, please see this answer https://stackoverflow.com/a/13966749/3029422

Depending on your implementation needs you can either stop the event propagation or just get the parent node.

Change your target variable to var target = e.target.parentNode; in order to have a reference to the <div> element:

var desc = document.querySelectorAll(".desc");

function change() {
  var how = desc.length;

  for (var i = 0; i < how; i++) {
    desc[i].getElementsByTagName("p")[1].style.display = "none";
  }
}

change();

function show(e) {
  var target = e.target.parentNode;

  console.log(target);
}

for (var i = 0; i < desc.length; i++) {
  desc[i].onclick = show;
}
.desc {
  width: 80%;
  margin: 0 auto;
  border: 3px solid #cccccc;
  padding: 5px;
  margin-bottom: 10px;
}
<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>

<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>

<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
Community
  • 1
  • 1
Ionut
  • 1,729
  • 4
  • 23
  • 50