How to make a selection with javascript

Question

How to make a selection with javascript

Navigation

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

0

How to select test8 from the post that 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

asked by anonymous 21.03.2018 / 21:51

2 answers

0

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

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

21.03.2018 / 21:56

Centering images side by side How to print the result of a php function from another page?

score 1 · Accepted Answer

You can use parentNode and querySelector to get to the div you want, but you must change eventListener to pass the clicked element as a 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>