Как можно передать содержимое элемента при клике на него?

Question

[Алексей Архипенко]

Здравсвтуйте, такой вопрос. Есть такой блок:

<h1>Здесь выводится текст выбранного значения:  </h1>
<div class="dropdown__body" id="rent_time">
    <div class="field-radio">
        <label class="field-radio__name">
            <input class="field-radio__input" name="PROPERTY_LEASE_MAX_TERM" type="radio" value="1">
            <span class="field-radio__name-text">На сутки</span>
        </label>
    </div>
    <div class="field-radio">
        <label class="field-radio__name">
            <input class="field-radio__input" name="PROPERTY_LEASE_MAX_TERM" type="radio" value="3">
            <span class="field-radio__name-text">На 2-3 дня</span>
        </label>
    </div>
    <div class="field-radio">
        <label class="field-radio__name">
            <input class="field-radio__input" name="PROPERTY_LEASE_MAX_TERM" type="radio" value="6">
            <span class="field-radio__name-text">На 4-6 дней</span>
        </label>
    </div>
    <div class="field-radio">
        <label class="field-radio__name">
            <input class="field-radio__input" name="PROPERTY_LEASE_MAX_TERM" type="radio" value="7">
            <span class="field-radio__name-text">На 7 дней</span>
        </label>
    </div>
</div>

нужно сделать, чтобы при клике на радио-кнопку текст из спана .field-radio__name-text передавался в заголовок h1, и соответственно менялся если выбрано другое значение. Я пробовал присвоение класса по клику и передать значение при помощи .textContent, но почему то не срабатывает getElementsByClassName() чтобы вывести значение, getElementById работает, но я не могу присваивать и удалять id по клику, правильно?

Заранее благодарен за ответ!

Comments

[0xD34F]

document.querySelector('#rent_time').addEventListener('change', function(e) {
  document.querySelector('h1').textContent = e.target.nextElementSibling.textContent;
});

[Алексей Архипенко]

Очень помогло! Спасибо!