Как передать name кнопки при клике с помощью классов?

135

13 августа 2019, 09:00

Помогите пожалуйста. Нужно, чтобы во время клика на кнопку в соседнем div-e выводился name этой кнопки. Реализовать это нужно с помощью чистого JS и классов(если возможно), т.к у кнопок нету id, а с помощью TagName не делаю, потому что есть и другие кнопки.

HTML

   <div class="result><p><Здесь должен быть отображён name кнопки</p></div>
    <ul>
        <li class="slide"><button name="N102" class="btn"/>Button 1</li> 
        <li class="slide"><button name="N104" class="btn"/>Button 2</li> 
        <li class="slide"><button name="N106" class="btn"/>Button 3</li> 
        <li class="slide"><button name="N108" class="btn"/>Button 4</li>
    </ul>

У меня это работает с поиском, но с кликом по кнопке не могу разобраться.

Answer 1

Pure JS. Все кнопки с name, начинающимся с N будут затронуты.

document.querySelectorAll("button.btn[name^='N']").forEach(item => { 
  item.addEventListener("click", e => { 
    let elem = e.currentTarget; 
    let name = elem.getAttribute("name"); 
    document.querySelector("div.result > p").innerHTML = name; 
  }); 
});

<div class="result"> 
  <p>Здесь должен быть отображён name кнопки</p> 
</div> 
 
<ul> 
  <li class=" slide "><button name="N102 " class="btn " />Button 1</li> 
  <li class="slide "><button name="N104 " class="btn " />Button 2</li> 
  <li class="slide "><button name="N106 " class="btn " />Button 3</li> 
  <li class="slide "><button name="N108 " class="btn " />Button 4</li> 
</ul>

Answer 2

На JQ.

$(function(){ 
$('.btn').on('click',function(e){ 
   $('.result').text($(e.target).attr('name')); 
 }) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="result"><p><Здесь должен быть отображён name кнопки</p></div> 
    <ul> 
        <li class="slide"><button name="N102" class="btn"/>Button 1</li>  
        <li class="slide"><button name="N104" class="btn"/>Button 2</li>  
        <li class="slide"><button name="N106" class="btn"/>Button 3</li>  
        <li class="slide"><button name="N108" class="btn"/>Button 4</li> 
    </ul>

На чистом JS.

var btn = document.getElementsByClassName('btn'); 
for (var i = 0; i < btn.length; i++) { 
btn[i].addEventListener('click',function(e){ 
document.getElementsByClassName('result')[0].innerHTML = e.target.name 
}) 
}

<div class="result"><p>Здесь должен быть отображён name кнопки</p></div> 
    <ul> 
        <li class="slide"><button name="N102" class="btn"/>Button 1</li>  
        <li class="slide"><button name="N104" class="btn"/>Button 2</li>  
        <li class="slide"><button name="N106" class="btn"/>Button 3</li>  
        <li class="slide"><button name="N108" class="btn"/>Button 4</li> 
    </ul>