单击父div时如何获取输入的确切值

Question

Assuming the code below was rowed out from the database having everything the same except the value how do I get the value of any one clicked without affecting the others?

<div class="mind">
  <a href="#"><span class="r">Home</span></a> 
  <input class="input1" type="hidden" value="123">
</div>    
<div class="mind">
  <a href="#"><span class="t">Create User</span></a> 
  <input class="input1" type="hidden" name="rank" value="abc">
</div> 
<div class="mind">
  <a href="#"><span class="t">List Users</span></a>
  <input class="input1" type="hidden" name="rank" value="abc">
</div>   
<div class="mind">
  <a href="#"><span class="t">Admin</span></a> 
  <input class="input1" type="hidden" name="rank" value="abc">
</div>

Answer 1

Vanilla JS, ES6

• find elements by classname in the document
• for each one of the elements attach onclick
• once inside onclick find elements by tag name in this element
• use first one to get value

 let minds = document.getElementsByClassName('mind'); [...minds].forEach(x => { x.onclick = () => { let i = x.getElementsByTagName('INPUT')[0]; console.log(i.value) } });

 <div class="mind"> <a href="#"><span class="r">Home</span></a> <input class="input1" type="hidden" value="123"> </div> <div class="mind"> <a href="#"><span class="t">Create User</span></a> <input class="input1" type="hidden" name="rank" value="abc1"> </div> <div class="mind"> <a href="#"><span class="t">List Users</span></a> <input class="input1" type="hidden" name="rank" value="abc2"> </div> <div class="mind"> <a href="#"><span class="t">Admin</span></a> <input class="input1" type="hidden" name="rank" value="abc3"> </div>