Событие щелчка работает правильно в атрибуте onclick, но не как addeventlistener - PullRequest
Новая
       98

Событие щелчка работает правильно в атрибуте onclick, но не как addeventlistener

1 голос
/ 22 апреля 2020

У меня интересная проблема, которая, на мой взгляд, должна быть довольно простой, но она поставила меня в тупик. Я пытаюсь просто отслеживать проверенное состояние флажка (если установлен флажок, включить кнопку, если не отмечен, оставить кнопку отключена). Проблема, с которой я столкнулся, заключается в том, что я не могу должным образом отслеживать проверенное состояние флажка в приемнике событий, но он работает, если я добавляю его как атрибут onclick в html, и я понятия не имею, почему это так.

Рабочий код с атрибутом onclick html:

Html: 

<input type='checkbox' name='check' id='consent' onclick='checkConsent()'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS : 

const dialogConsentBtn = document.getElementById('consentBtn');
const consentCheck = document.getElementById('consent');

const checkConsent = () => {

  if (consentCheck.checked === true) {
    console.log('checked');
    dialogConsentBtn.disabled = false;
  } else {
    console.log('unchecked');
    dialogConsentBtn.disabled = true;
  }
}

Неработающий код с прослушивателем событий:

HTML: 

<input type='checkbox' name='check' id='consent'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS: 

    const dialogConsentBtn = document.getElementById('consentBtn');
    const consentCheck = document.getElementById('consent');

    consentCheck.addEventListener('click', (event) => {
      event.preventDefault();
      if (consentCheck.checked === true) {
        console.log('checked');
        dialogConsentBtn.disabled = false;
        consentCheck.checked = true;
      } else {          
        console.log('unchecked');
        dialogConsentBtn.disabled = true;
        consentCheck.checked = false;
      }
    }, false);

В приведенном выше (нерабочем) коде я получаю следующее поведение:

  • флажок не проверяет или снимает флажок визуально
  • console.log всегда выводит «непроверенный», так что если условие всегда возвращается

У меня есть ощущение, что есть какая-то фундаментальная разница между тем, как эти две вещи обрабатываются браузер, который лежит в основе моей дилеммы, но я просто не могу понять, что это такое. Любая помощь с этим будет принята с благодарностью.

PS Я также попытался использовать приведенный выше код с событием 'change' в прослушивателе событий вместо события click, но я столкнулся с той же проблемой.

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Причины в том, что а) вы event.preventDefault() на событии флажка, который помешает его проверке, и б) если он отмечен, вы сразу снимаете галочку с consentCheck.checked = false. У вас также был противоположный логин c для кнопки согласования, поэтому вы отключали его, когда флажок был установлен, и включали его, когда флажок снят.

Так что флажок во втором примере не может проверить по этим двум причинам, см. ниже: 

const dialogConsentBtn = document.getElementById("consentBtn");
const consentCheck = document.getElementById("consent");

consentCheck.addEventListener(
  "click",
  (event) => {
    // event.preventDefault();
    if (consentCheck.checked === true) {
      console.log("checked");
      dialogConsentBtn.disabled = false; // was true
      // consentCheck.checked = false;
    } else {
      console.log("unchecked");
      dialogConsentBtn.disabled = true; // was false
      // consentCheck.checked = true;
    }
  },
  false
);
<input type="checkbox" name="check" id="consent" />
<label for="check">Lorem ipsum</label>
<button id="consentBtn" disabled>Agree</button>
0 голосов
/ 22 апреля 2020

Как и ответ выше, вы предотвращаете действие по умолчанию, вызывая метод event.preventDefault (). Кроме того, вы должны использовать событие onChange, а не щелчок.

...