Получить значение из div и добавить его в input JS

294

13 марта 2018, 04:34

Как получить значение из div и добавить его в input (value)?

Структура html:

<input type="text" name="qty" id="qty" maxlength="12" value="1" title="" class="input-text qty">
        <div class="count-buttons__table">
            <div class="count-buttons__table-tr">
                <div class="count-buttons__table-td">6</div>
                <div class="count-buttons__table-td">12</div>
                <div class="count-buttons__table-td">18</div>
            </div>
            <div class="count-buttons__table-tr">
                <div class="count-buttons__table-td">24</div>
                <div class="count-buttons__table-td">30</div>
                <div class="count-buttons__table-td">36</div>
            </div>
        </div>
    </div>

Нужно выбрать число из таблицы и подставить его в value у input. Выбор числа по клику на элемент с классом count-buttons__table-td

Answer 1

var elems = document.querySelectorAll('.count-buttons__table-td'); 
 
for (var i = elems.length - 1; i >= 0; i--) { 
  elems[i].addEventListener('click', myFunc, false); 
} 
 
function myFunc() { 
  document.getElementById('qty').value = this.innerHTML; 
}

<input type="text" name="qty" id="qty" maxlength="12" value="1" title="" class="input-text qty"> 
<div class="count-buttons__table"> 
  <div class="count-buttons__table-tr"> 
    <div class="count-buttons__table-td">6</div> 
    <div class="count-buttons__table-td">12</div> 
    <div class="count-buttons__table-td">18</div> 
  </div> 
  <div class="count-buttons__table-tr"> 
    <div class="count-buttons__table-td">24</div> 
    <div class="count-buttons__table-td">30</div> 
    <div class="count-buttons__table-td">36</div> 
  </div> 
</div> 
</div>