Как в JS к нескольким тегам button задать onclick?

251
29 марта 2018, 10:25

Здравствуйте!

Смысл простой очень, нужно чтобы при нажатии на определенную кнопку button открывался div с определенный текстом (текст разный для каждой кнопки). Вопрос в том как можно проще это реализовать. Это нужно будет для каждого button присваивать отдельный id и создавать отдельную функцию для каждой кнопки (которая рисует div с нужным текстом) или есть более гуманные способы?

p/s кто-то через class советовал делать, но тогда я не понимаю как это работает, ведь по классу не обратишься к конкретному тексту.

<html>
        <head>
                <script type="text/javascript" src="test.js"></script>
                <title>ariadna wiki</title>
                <link rel="stylesheet" type="text/css" href="style.css">
        </head>
            <body>
                <div>
                    <ul>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    </ul> 
                </div>
           </body>
        </html>
Answer 1

Обновление: Если у вас уже есть дивы с текстом можете их связать с кнопками например по атрибуту name

var elems = document.getElementsByTagName('button'); 
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler); 
var current; 
 
function handler(event) { 
  if (current) current.style.display = 'none'; 
  var name = event.target.getAttribute('name'); 
  current = document.querySelector(`div[name="${name}"]`); 
  current.style.display = 'block'; 
};
div { 
  display: none 
} 
 
.menu { 
  display: block 
}
<div class='menu'> 
  <ul> 
    <button name="Первый">1</button> 
    <button name="Второй">2</button> 
    <button name="Третий">3</button> 
    <button name="Четвертый">4</button> 
    <button name="Пятый">5</button> 
    <button name="Шестой">6</button> 
    <button name="Седьмой">7</button> 
    <button name="Восьмой">8</button> 
    <button name="Девятый">9</button> 
    <button name="Десятый">10</button> 
  </ul> 
</div> 
<div name="Первый">1</div> 
<div name="Второй">2</div> 
<div name="Третий">3</div> 
<div name="Четвертый">4</div> 
<div name="Пятый">5</div> 
<div name="Шестой">6</div> 
<div name="Седьмой">7</div> 
<div name="Восьмой">8</div> 
<div name="Девятый">9</div> 
<div name="Десятый">10</div>

Или можно например отображаемый текст в атрибутах хранить и подставлять куда надо.

var elems = document.getElementsByTagName('button'); 
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler); 
 
function handler(event) { 
  document.getElementById('container').innerText = event.target.getAttribute('text'); 
};
<div> 
  <ul> 
    <button text="Первый">1</button> 
    <button text="Второй">2</button> 
    <button text="Третий">3</button> 
    <button text="Четвертый">4</button> 
    <button text="Пятый">5</button> 
    <button text="Шестой">6</button> 
    <button text="Седьмой">7</button> 
    <button text="Восьмой">8</button> 
    <button text="Девятый">9</button> 
    <button text="Десятый">10</button> 
  </ul> 
</div> 
<div id="container"> 
  Пустой 
</div>

Answer 2

Если кнопки внутри своего контейнера идут в том же порядке что и div'ы внутри своего контейнера, тогда можно открывать div'ы по индексу кнопок:

var buttons = document.querySelectorAll('ul button'); 
for(var i = 0; i < buttons.length; i++) { 
	(function(index){ 
		buttons[i].addEventListener('click', function(){ 
			var divIndex = index*1+1*1; 
			document.querySelector('.divs div:nth-of-type('+divIndex+')').style.background = 'red'; // здесь прикрутите открытие блока 
		}); 
	})(i); 
}
<ul> 
	<button>Кнопка 1</button> 
	<button>Кнопка 2</button> 
</ul> 
<div class="divs"> 
	<div>Текст блока 1</div> 
	<div>Текст блока 2</div> 
</div>

где .divs - это контейнер с div'ами (можете поменять на свой класс)

READ ALSO
Замена PDF путём смены src в тэге &lt;embed&gt;
javascript

Замена PDF путём смены src в тэге <embed>

В консоли видно, что src меняется, но отображаемый pdf остается прежним

 182
React. Objects are not valid as a React child (found: object with keys {slide})
javascript

React. Objects are not valid as a React child (found: object with keys {slide})

Добрый деньПолучаю ошибку рендера в следующей ситуации

 183
Как сделать прелоадер для сайта?
javascript

Как сделать прелоадер для сайта?

Стандартный способ это подгрузить мини блок и стили для него, в потом скрытьДля этого устанавливается таймер

 178
Google adwords reports
PHP

Google adwords reports

В документации есть такой пример:

 198