Document getelementbyclass не работает

document.getElementsByClassName не работает [дубликат]

используете ли вы конфигурацию SMTP для отправки своей электронной почты? попробуйте вместо этого использовать phpmailer. вы можете загрузить библиотеку из https://github.com/PHPMailer/PHPMailer . Я создал электронную почту, отправив этот путь:

6 ответов

Элемент, который вы пытались найти, не был в DOM , когда ваш скрипт работал.

Позиция вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры анализируют HTML-документы сверху донизу. Элементы добавляются в DOM, и сценарии выполняются (как правило), когда они встречаются. Это означает, что порядок имеет значение. Как правило, скрипты не могут найти элементы, которые появляются позже в разметке, потому что эти элементы еще не добавлены в DOM.

Рассмотрим следующую разметку; сценарий # 1 не находит

Итак, что вы должны делать? У вас есть несколько вариантов:

Вариант 1: Переместите свой скрипт

Переместите свой скрипт дальше по странице, перед закрывающим тегом тела. Организованный таким образом остальная часть документа анализируется до того, как будет выполнен ваш скрипт:

Примечание: размещение скриптов внизу как правило, считается лучшей практикой .

Вариант 2: jQuery’s ready()

Отмените свой сценарий до тех пор, пока DOM не будет полностью проанализирован, используя ready() :

Примечание. Вы можете просто привязать к DOMContentLoaded или window.onload , но у каждого есть свои оговорки. jQuery ready() предоставляет гибридное решение.

Вариант 3: Делегирование событий

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

Когда элемент вызывает событие (при условии, что это bubbling g6], и ничто не останавливает его распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет нам привязать обработчик к существующему элементу и примерным событиям, когда они пузырятся от его потомков . даже те, которые добавлены после присоединения обработчика. Все, что нам нужно сделать, это проверить событие, чтобы узнать, был ли он поднят нужным элементом и, если да, запустите наш код.

jQuery on() выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомка и обработчик событий:

Примечание: Обычно этот шаблон зарезервированы для элементов, которые не существовали во время загрузки или , чтобы избежать прикрепления большого количества обработчиков. Также стоит отметить, что, пока я прикреплял обработчик к document (для демонстрационных целей), вы должны выбрать ближайшего надежного предка.

Вариант 4: Атрибут defer

Используйте атрибут defer в click me

Для справки, вот код из этого внешнего скрипта :

Примечание: атрибут defer , безусловно, кажется , как волшебная пуля , но важно знать об оговорках . 1. defer может использоваться только для внешних скриптов, т. е. для тех, у кого есть атрибут src . 2. знать о поддержке браузера , то есть: ошибка реализации в IE & lt; 10

Короткие и простые: поскольку элементы, которые вы ищете, не существуют в документе (пока).

В оставшуюся часть этого ответа я буду использовать getElementById как пример, но то же самое относится к getElementsByTagName , querySelector и любому другому методу DOM, который выбирает элементы.

Есть две причины, по которым элемент может не существовать:

1. Элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что идентификатор, который вы передаете на getElementById , действительно соответствует идентификатору существующего элемента в (сгенерированном) HTML и что у вас не было с ошибкой идентификатор (идентификаторы чувствительный !). Кстати, в большинстве современных браузеров , которые реализуют методы querySelector() и querySelectorAll() , нотация стиля CSS используется для извлечения элемента его id , например: document.querySelector(‘#elementID’) , в отличие от способа, с помощью которого элемент извлекается его id в [[16]; в первом символе # необходимо, во втором это приведет к тому, что элемент не будет извлечен.
2. Элемент не существует в данный момент , который вы вызываете getElementById ].

Последний случай довольно распространен. Браузеры анализируют и обрабатывают HTML сверху вниз. Это означает, что любой вызов элемента DOM, который встречается до появления этого элемента DOM в HTML, не будет выполнен.

Рассмотрим следующий пример:

Появляется div после script . В настоящий момент сценарий выполняется, элемент не существует , но и getElementById вернут null .

То же самое относится к все селекторы с jQuery. jQuery не найдет элементов, если вы ошибочно написали ваш селектор, или вы пытаетесь выбрать их , прежде чем они на самом деле существуют .

Добавленный поворот — это когда jQuery не найден потому, что вы загрузили скрипт без протокола и запускаетесь из файловой системы:

этот синтаксис используется, чтобы позволить сценарию загружаться через HTTPS на странице с протоколом https: // и для загрузки HTTP-версии на странице с протоколом http: //

У этого есть неудачный побочный эффект попытки и невозможность загрузить file://somecdn.somewhere.com.

Прежде чем позвонить getElementById (или любой метод DOM, если на то пошло), убедитесь, что элементы, к которым вы хотите получить доступ, существуют, т. е. загружается DOM.

Это может быть обеспечено просто добавив ваш JavaScript после к соответствующему элементу DOM

, и в этом случае вы также можете поместить код непосредственно перед тегом закрывающего тела (

Источник

команда click () не работает для document.getElementsByClassName ()

Я делаю автоматизированные скрипты браузера с использованием JavaScript, и я хочу использовать команду click () на этом сайте, но у кнопки на сайте нет идентификатора (который работает нормально). Однако у него есть только имя класса. Когда я делаю document.getElementsByClassName(btn.btn-danger.btn-lg.btn-block.betButton).click() , это не работает.

Вот проверка кнопки, которую я хочу нажать:

Можно ли использовать функцию click () на кнопке? Есть ли какой-нибудь способ присвоить Id сам? Спасибо за любые ответы 🙂

Я не думаю, что это копия, поскольку я знаю, в чем различия. Но у кнопки нет идентификатора, только имя класса. И как это не работает, что еще я мог сделать, чтобы вызвать событие click ()?

Edit2 = Есть 3 кнопки с одинаковыми именами классов, с той лишь разницей, что текст кнопки и цвет данных, есть ли способ манипулировать этим?

2 ответа

getElementsByClassName возвращает HTMLCollection, который является массивоподобным объектом.

Это означает, что в вашем случае вы должны получить элемент с индексом 0, который в идеале для создаваемого вами приложения должен быть единственным, который вы получаете:

В противном случае ваше расширение, вероятно, перестанет работать, если веб-сайты будут обновлены, а элементы, соответствующие вашему селектору, изменят порядок.

Также обратите внимание, что, как указал @Barmar, для фильтрации по нескольким классам с getElementsByClassName вы должны использовать пробелы, а не точки.

Допустим, у вас есть:

• document.getElementsByClassName(‘a’) вернет HTMLCollection со всеми элементами класса a : [ , ]
• document.getElementsByClassName(‘a b’) вернет HTMLCollection со всеми элементами с классами a и b : [ ]
• document.getElementsByClassName(‘a.b’) вернет HTMLCollection со всеми элементами класса a.b : [ ]

Вы можете использовать querySelectorAll , чтобы иметь возможность использовать селекторы, такие как .a.b или просто <>, который вместо HTMLCollection вернет только первый элемент, соответствующий селектору, поэтому вы можете сразу вызвать click для него:

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

Заметка.

Как видно из этого примера, вам нужно удалить << X0>> для этого работает, так как JavaScript уже знает, что вы выбираете классы с помощью функции, которую вы используете.

Источник

Как настроить событие на элемент отслеженный getElementsByClassName.

К примеру:
var getWithId = document.getElementById(«asd»);
getWithId.onclick = function() <
this.innerHTML = «value»;
>
Так всё работает!

ну а если заменить getElementById на getElementsByClassName, то ничего и не срабатывает.

• Вопрос задан более трёх лет назад
• 841 просмотр

Это нулевой индекс, то есть мы берем элемент с индексом 0, самый первый элемент в массиве, который возвращает метод getElementsByClassName(‘asd’).

А вообще парень этим примером хотел показать, что метод addEventListener существует только у элементов dom, и следовательно вызывать его надо для каждого нужного элемента.

Например, если переписать ваш пример так, чтобы он работал с массивом элементов, то получится как-то так:

Umid:
Функции jQuery рассчитанные на модификацию элементов DOM умеют автоматически определять что в них передано — один элемент или массив. На самом деле все не так просто, но сильно упрощенно это выглядело бы так:

Если в функцию передан один элемент, то эта функция выполняется только для него, а если передан массив элементов, то функция выполняется для каждого элемента в массиве. Конструкция $(‘.asd’).on(‘click’, handler) вешает обработчик на все элементы, найденные селектором ‘.asd’, будь их 100, 1 или 0, и конечно же она все равно использует цикл для того чтоб это сделать, по-другому быть не может. Скорее всего jQuery функция будет даже дольше выполняться ввиду сложности внутренней логики jQuery.

По поводу третьего аргумента addEventListener: да, это называется «всплытие событий», но объяснить на словах у меня не получится. Я попробую: если у вас есть 5 вложенных друг в друга элементов и на каждом висит on(‘click’), то при нажатии на самый верхний выполнятся все обработчики, начиная с того, на какой непосредственно элемент кликнул пользователь: 5, 4, 3, 2, 1.

Если например на третий элемент обработчик повешен с атрибутом useCapture=true (вот так — addEventListener(‘click’, handler, true)), то при клике на самый верхний элемент, последовательность вызовов будет такая: 3, 5, 4, 2, 1.

Также порядок выполнения обработчиков, которые используют capture mode, обратный, то есть если обработчики всех элементов используют capture mode, при клике на самый верхний элемент последовательность будет такая: 1, 2, 3, 4, 5, сначала выполнится обработчик родительского элемента.

Я сделал маленькую демку, можете поиграться с режимами. При клике на строку «useCapture attribute of. » режим обработчика для соответствующего элемента меняется и отображается в этой же строке. По клику на разноцветные блоки появится надпись, отражающая последовательность вызовов, например если средний элемент будет использовать capture mode, а остальные — нет, то последовательность будет выведена такая: two + three + one

Никита Полевой: может я опять что то недопонял, но зачем же вообще ставить это всплытие??

Далее событие сначала двигается вниз от корня документа к event.target, по пути вызывая обработчики, поставленные через addEventListener(. true).
Далее событие двигается от event.target вверх к корню документа, по пути вызывая обработчики, поставленные через on* и addEventListener(. false).

Не легче ли будет вообще не вписывать его?

Никита Полевой: и опять у мне не удаётся поставить событие на элементы взятые классом. Где я ошибся?

Umid:
Если вы имеете ввиду зачем вписывать false если useCapture и так по дефолту будет равен false, то да, в некоторых случаях можно обойтись без него, т.к. вызов addEventListener(‘click’, handler) аналогичен вызову addEventListener(‘click’, handler, false). Но в некоторых случаях из удобства (и не только) этот аргумент не опускается. Например, у меня в примере: чтобы вешать обработчики я использую и true, и false значения useCapture, поэтому чтобы снимать обработчики, мне нужно различать обработчики на те которые используют capture, и те которые не используют, ибо если на элемент повешены обработчики обоих типов:

. то снять все обработчики с useCapture=true можно будет только явно указав useCapture=true в функции removeEventListener, и например такой код не уберет все обработчики:

. зато такой уберет:

А если вы имеете ввиду что не видите смысла в использовании capture режима, то тут я могу сказать только то, что если вы не видите как можно применить фичу, то она для вас наверное и впрямь бесполезна, и станет полезной только тогда, когда вы наткнетесь на необходимость использовать ее. Не знаю, какой пример вам дать, чтоб вы убедились в том, что эта фича полезна. Ну например если при клике на какие-то элементы нам сначала нужно вызвать обработчик родительского элемента, то у родителя useCapture должен быть true, а у элементов внутри него — false.

По ошибке все просто: весь ваш код выполняется сразу же, ни одна из частей кода не ждет другую. А поскольку ваш скрипт завершает работу только спустя некоторое время, в последней части кода вы пытаетесь выбрать селектором элементы которых еще нет, а именно document.getElementsByClassName(«section-span») не находит нужных элементов, потому что в момент его выполнения структура элемента body такая:

То есть в момент вызова функции document.getElementsByClassName(«section-span») на странице есть только div#block с пустыми секциями; заполнены элементами span.section-span они будут позже.
Исправить это не исправляя основной код можно добавив лишнюю проверку к функции intervalOutputing, а именно после того, как колонка заполнена, проверять последняя ли это колонка, и если да, то выполнять ваш код. Вот рабочий пример.

Но логичней было бы подправить имеющийся алгоритм и потом уже добавлять туда обработчики, поэтому я все же советую вам разобрать все ошибки вашего кода, т.к. некоторые из них достаточно мощные, стоит залатать пробелы. Но впрочем как хотите, дальше можете не читать)

Для начала раскидайте ваш код так, как этого хочет jsfiddle: весь css код — в окошко CSS, весь html код — в html, и js — в js.
Получится так.

У вас в функции setContent опечатка: вы присваиваете значение this.innerHTMl, когда у элемента this нет такого свойства. Этому элементу будет добавлено свойство innerHTMl. Зато у этого элемента есть свойство innerHTML xD То есть вы ошиблись в последнем символе, а поскольку JS регистрозависим, то это критический логический баг.

У вас есть переменная makingColumsInterval, вы в нее кладете идентификатор, который вам возвращает функция setTimeout(). В том же месте у вас объявлена именованная функция rekurs() в которой столько ошибок, что работоспособность вашего кода я назвал бы чудом) Эта функция просто нерабочая. Вот эта часть кода:

1. В строке «var makingColumsInterval = (rekurs(),100);» туча ошибок: для начала вы объявляете переменную makingColumsInterval через ключевое слово var, таким образом делая ее видимой только внутри функции rekurs() во время её выполнения. А ведь ваша функция рассчитана на то, чтоб использовать внешнюю переменную makingColumsInterval. Потом в этой же строке вы пропустили ‘setTimeout’: хотели написать ‘setTimeout(rekurs(),100)’, а написали ‘(rekurs(),100)’ (кстати, даже если бы вы не пропустили ‘setTimeout’, все равно все бы обрушилось, ибо скобки после имени функции означают ее немедленный вызов, а тогда функция setTimeout первым аргументов бы получила undefined, что привело бы к ошибке). Таким образом запись в переменную makingColumsInterval уже начата (то есть ссылка на внешнюю переменную makingColumsInterval уже стерта), но не закончена, т.к. rekurs() никогда не завершается. То есть завершается, но принудительно браузером. Поэтому rekurs() не видит внешнюю переменную makingColumsInterval, зато видит недоделанную внутреннюю, которая ввиду своей недоделанности равна undefined. Если бы вы заглянули в консоль, вы бы увидели, что ваш скрипт выполняется больше хрентиллиона раз, а потом аварийно вырубается.

Читайте эту статью про области видимости.

2. Теперь об этой части кода:

Видимо предполагалось, что этот if должен остановить выполнение функции, но по факту происходит вот что: сравниваются значения переменных randNumbersArray.length и columQty, если они равны — чистится таймаут и продолжается выполнение функции, а если не равны, то чистка таймаута пропускается, а функция продолжает выполняться. Блок, который выполняется условным оператором if, никак не влияет на ход функции, и в итоге функция выполняется пока браузер не остановит ее, выдав ошибку too much recursion. Исправить это можно добавив после чистки таймаута инструкцию ‘return;’

В целом ваша функция использует странную логику — она выполняется, потом создает еще раз отложенный вызов самой себя и так до тех пор, пока randNumbersArray.length не станет равен columQty. Вместо setTimeout можно использовать setInterval — первый аргумент у него это функция которая будет выполняться каждый промежуток времени, заданный вторым аргументов. Если бы вы использовали setInterval, вам бы пришлось создать и очистить интервал всего раз.

После исправлений ваша функция стала выглядеть вот так:

Источник