Слушатель событий, с радио-кнопкой перестает работать - PullRequest
Новая
       23

Слушатель событий, с радио-кнопкой перестает работать

0 голосов
/ 08 февраля 2020

Итак, я делаю это базовое c задание из университета, касающееся DOM Manipulation.

По сути, у меня есть пользовательские профили на странице HTML, и есть 2 радиоблока - Unlock и Lock. Поэтому, когда вы переключаете «Разблокировать» и нажимаете кнопку «Показать больше», он показывает вам данные для этого профиля и меняет название кнопки на «Скрыть это». Проблема в том, что я нажимаю «Показать больше», затем нажимаю «Скрыть это», а затем, когда я снова нажимаю «Показать больше», это не работает. Как будто весь слушатель событий перестает работать. 

function lockedProfile() {
    const $buttons = document.getElementsByTagName('button');

    Array.from($buttons).forEach(button => {
        button.addEventListener('click', e => {
            const parent = e.currentTarget.parentNode;
            const checkBox = parent.children[4];

            if (checkBox.checked) {
                parent.children[9].style.display = 'block';
                parent.children[10].textContent = 'Hide it';
                button.addEventListener('click', () => {
                    if (checkBox.checked) {
                        parent.children[10].textContent = 'Show More';
                        parent.children[9].style.display = 'none';
                    }
                });
            }
        });
    });
}

Я не знаю, насколько уместен код HTML, но вот, если вы хотите его проверить:

https://pastebin.com/hDaiKTTZ

Спасибо!

1 Ответ

0 голосов
/ 08 февраля 2020

путь к фолу 

const allForms = document.querySelectorAll('form.profile')
  ;
allForms.forEach(f=>
  {
  f.onsubmit=e=>e.preventDefault()  // disable forms submit
    ;
  f.oninput=e=>
    {
    if (e.target.name === 'userLocked')
      {
      f.theButton.textContent = ( f.userLocked.value==='lock' ) ? 'Show More' : 'Hide it'
      }
    }
  })
.profile {
  display: block;
  background-color: #e29fc1;
  margin: 2em 1em;
}
<form class="profile">
  my radio  button 1
  <p>
    <label> <input type="radio" name="userLocked" value="lock" checked> Lock </label>
    <label> <input type="radio" name="userLocked" value="unlock"      >  Unlock </label>
  </p>
  <button name="theButton">Show more</button>
</form>

<form class="profile">
  my radio  button 2
  <p>
    <label> <input type="radio" name="userLocked" value="lock" checked> Lock </label>
    <label> <input type="radio" name="userLocked" value="unlock"      >  Unlock </label>
  </p>
  <button name="theButton">Show more</button>
</form>

<form class="profile">
  my radio  button 3
  <p>
    <label> <input type="radio" name="userLocked" value="lock" checked> Lock </label>
    <label> <input type="radio" name="userLocked" value="unlock"      >  Unlock </label>
  </p>
  <button name="theButton">Show more</button>
</form>
...