How to make a selection with javascript

Asked

Viewed 37 times

0

How to select test8 from the post I clicked??

var black = document.querySelectorAll(".test4");

for(var i = 0; i < black.length; i++){
  black[i].addEventListener("click", selectRoxo);
}

function selectRoxo(){
  // Como selecionar test8 do post que cliquei??
  
  
}
.posts{
 width: 180px;
  height: 180px;
  margin-bottom: 5px;
}
.coluna1, .coluna2{
  width: 90px;
  height: 50%;
  background: red;
}
.la, .lo{
  height: 25%;
  width: 100%;
  background: green;
}
.test4{
 background: black;
 color: white;
 cursor: pointer;
}
.test8{
  background: purple;
  color: white;
}
<div class="posts">
	<div class="coluna1">
      <div class="test1 la"></div>
      <div class="test2 la"></div>
      <div class="test3 la"></div>
      <div class="test4 la">Clicar</div>
  </div>
  	<div class="coluna2">
      <div class="test5 lo"></div>
      <div class="test6 lo"></div>
      <div class="test7 lo"></div>
      <div class="test8 lo">8</div>
  </div>
</div>
<div class="posts">
	<div class="coluna1">
      <div class="test1 la"></div>
      <div class="test2 la"></div>
      <div class="test3 la"></div>
      <div class="test4 la">Clicar</div>
  </div>
  	<div class="coluna2">
      <div class="test5 lo"></div>
      <div class="test6 lo"></div>
      <div class="test7 lo"></div>
      <div class="test8 lo">9</div>
  </div>
</div>

javascript

2 answers

1


Can use parentNode and querySelector to reach the div desired, but it is necessary to change the eventListener to pass the element clicked as parameter to the function:

var black = document.querySelectorAll(".test4");

for(var i = 0; i < black.length; i++){
   black[i].addEventListener("click", function(){ selectRoxo(this) });
}

function selectRoxo(e){
  
  var test8 = e.parentNode.parentNode.querySelector(".coluna2 .test8");
  
  console.log(test8);
  
}
.posts{
 width: 180px;
  height: 180px;
  margin-bottom: 5px;
}
.coluna1, .coluna2{
  width: 90px;
  height: 50%;
  background: red;
}
.la, .lo{
  height: 25%;
  width: 100%;
  background: green;
}
.test4{
 background: black;
 color: white;
 cursor: pointer;
}
.test8{
  background: purple;
  color: white;
}
<div class="posts">
	<div class="coluna1">
      <div class="test1 la"></div>
      <div class="test2 la"></div>
      <div class="test3 la"></div>
      <div class="test4 la">Clicar</div>
  </div>
  	<div class="coluna2">
      <div class="test5 lo"></div>
      <div class="test6 lo"></div>
      <div class="test7 lo"></div>
      <div class="test8 lo">8</div>
  </div>
</div>
<div class="posts">
	<div class="coluna1">
      <div class="test1 la"></div>
      <div class="test2 la"></div>
      <div class="test3 la"></div>
      <div class="test4 la">Clicar</div>
  </div>
  	<div class="coluna2">
      <div class="test5 lo"></div>
      <div class="test6 lo"></div>
      <div class="test7 lo"></div>
      <div class="test8 lo">9</div>
  </div>
</div>

  • vlw, you helped me!

  • Do not worry. Do not forget to mark in the answer you thought best. I saw here that you never mark rs... this is not interesting for the community. Always try to choose an answer to your questions and mark on only one of them. Abs!

  • Uai I mark arrow up, has another place to qualify?

  • Below the arrow has a gray symbol

  • When you click on it it turns green, but you should only do this in only 1 answer, the one you thought best... vote (arrows) you can vote for as many as you want

  • You are not required to mark when no response has resolved or helped in any way, but this is usually rare

  • This is explained on the page of Tour... it’s good to take a look

  • Thanks! Then review all your questions and mark the best answer of each one... they are all unanswered chosen. Abs friend!

Show 3 more comments

0

can try asssim by calling an event on the clicked line and passing this that will catch the object in question get and a function that will be called uses console log

<div class="test8 lo" onclick="obter(this)">8</div>

function obter(obj){
 console.log(obj)
}

  • No, it doesn’t, because I want to click on the black!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.