Кнопки JavaScript

Question

Существует input и 10 кнопок:

<div class="input-group mb-3">
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" id="input">
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary mr-2">1</button>
        <button type="button" class="btn btn-secondary mr-2">2</button>
        <button type="button" class="btn btn-secondary mr-2">3</button>
        <button type="button" class="btn btn-secondary mr-2">4</button>
        <button type="button" class="btn btn-secondary mr-2">5</button>
        <button type="button" class="btn btn-secondary mr-2">6</button>
        <button type="button" class="btn btn-secondary mr-2">7</button>
        <button type="button" class="btn btn-secondary mr-2">8</button>
        <button type="button" class="btn btn-secondary mr-2">9</button>
        <button type="button" class="btn btn-secondary mr-2">10</button>
    </div>
</div>

Как сделать так, чтобы при нажатии например на кнопку с семеркой в input выводилось 7, с другими числами аналогично?

Answer 1

let input = document.querySelector('input');

document.querySelector('.btn-group').addEventListener( 'click', e => {
  if( e.target.tagName === 'BUTTON' ) input.value = e.target.innerText;
});

<div class="input-group mb-3">
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" id="input">
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary mr-2">1</button>
        <button type="button" class="btn btn-secondary mr-2">2</button>
        <button type="button" class="btn btn-secondary mr-2">3</button>
        <button type="button" class="btn btn-secondary mr-2">4</button>
        <button type="button" class="btn btn-secondary mr-2">5</button>
        <button type="button" class="btn btn-secondary mr-2">6</button>
        <button type="button" class="btn btn-secondary mr-2">7</button>
        <button type="button" class="btn btn-secondary mr-2">8</button>
        <button type="button" class="btn btn-secondary mr-2">9</button>
        <button type="button" class="btn btn-secondary mr-2">10</button>
    </div>
</div>

БЛОГ НА HUSL

Кнопки JavaScript

Ответы (1 шт):