AddEventListener не работает над конкретным элементом

Question 1

У меня есть несколько экземпляров addEventListner в моем коде, и они, кажется, работают нормально, но когда я использую его в этой конкретной части, он ничего не делает. Я пытаюсь проверить это с помощью простого предупреждения, чтобы, когда вы нажимаете текстовое поле на имя, вверху всплывало предупреждение, но сейчас я ничего не получаю. Вот мое поле для имени и мой вызов addEventListener:

  <div class="_form_element _x77561130 _full_width " >
    <div class="_field-wrapper form__input-wrapper form__input-wrapper--labelled">
      <input class="form__field form__field--large form__field--text" type="text" id="fname" name="firstname" placeholder="" />
      <label class="_form-label form__floating-label">
        First Name
      </label>
    </div>      
  </div>

и это мой вызов:

document.getElementById("fname").addEventListener("click", function() {
    alert("Hello World!");  
});

Question 2

Здесь не так много деталей, но легко забыть о том, чтобы обернуть свой JS в функцию, которая проверяет, загружено ли окно или документ, чтобы он не сработал до того, как появятся элементы. Было бы полезно указать любые ошибки консоли.

window.addEventListener('load',function(){
 /* add your code here */
}

Проверьте этот ответ.

Question 3

Ваш код работает в приведенном ниже фрагменте, так что, возможно, ошибка где-то в другом месте.

document.getElementById("fname").addEventListener("click", function() {
    alert("Hello World!");  
});

<div class="_form_element _x77561130 _full_width " >
    <div class="_field-wrapper form__input-wrapper form__input-wrapper--labelled">
      <input class="form__field form__field--large form__field--text" type="text" id="fname" name="firstname" placeholder="" />
      <label class="_form-label form__floating-label">
        First Name
      </label>
    </div>      
  </div>

Brent Miller · Answer 1 · 2021-11-23T21:31:08

Здесь не так много деталей, но легко забыть о том, чтобы обернуть свой JS в функцию, которая проверяет, загружено ли окно или документ, чтобы он не сработал до того, как появятся элементы. Было бы полезно указать любые ошибки консоли.

window.addEventListener('load',function(){
 /* add your code here */
}

Проверьте этот ответ.

Хорошая мысль, но я не думаю, что в этом проблема, потому что ОП говорит: "У меня в коде есть несколько экземпляров addEventListner, и они, похоже, работают".

mrp · Answer 2 · 2021-11-23T21:44:18

Ваш код работает в приведенном ниже фрагменте, так что, возможно, ошибка где-то в другом месте.

document.getElementById("fname").addEventListener("click", function() {
    alert("Hello World!");  
});

<div class="_form_element _x77561130 _full_width " >
    <div class="_field-wrapper form__input-wrapper form__input-wrapper--labelled">
      <input class="form__field form__field--large form__field--text" type="text" id="fname" name="firstname" placeholder="" />
      <label class="_form-label form__floating-label">
        First Name
      </label>
    </div>      
  </div>

как ни странно, я удалил фрагмент кода для addEventListener и вставил его позже, и он worked...no понятия не имею, почему, но я предполагаю, что это было что-то, что просто не давало покоя в конце

AddEventListener не работает над конкретным элементом

Вопрос

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории