Не работает document getelementsbyclassname

команда 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 уже знает, что вы выбираете классы с помощью функции, которую вы используете.

Источник

document.getElementsByClassName (“”). innerHTML — не работает

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

6 ответов

getElementsByClassName не имеет определения для innerHTML потому что getElementsByClassName возвращает объект NodeList, а не элемент. NodeList — это, по сути, набор элементов.

Если вам нужно вернуть один элемент, используйте getElementById и передайте идентификатор элемента. Или даже лучше, поскольку вы уже используете jQuery, вы можете сделать следующее.

Document.getElementsByClassName document.getElementsByClassName(«today») получит коллекцию HTMLElement. Поэтому лучше изменить свой код на:

Ваш последний код должен быть:

Но помните, что обновил бы первый элемент. Если ваш. .today — второй или третий, это может не сработать, и вам может потребоваться настройка индекса.

Поскольку вы хотите связать html с элементом, вы не должны выполнять манипуляции DOM с угловым контроллером. Вы можете использовать угловое связывание (Doing dom манипуляция с контроллером считается плохой практикой).

Вы можете использовать директиву ng-bind-html на элементе, который добавит html в виде текста в нужный элемент. Кроме того, вам необходимо сделать этот html надежным с помощью $sce службы $sce trustAsHtml .

Код

наценка

Или вы также можете сделать повторно используемый фильтр, который сделает html надежным html, как показано ниже.

Источник

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

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

Источник

getElementsByClassName не работает внутри элемента div

У меня есть два HTML файла Home.html и test.html. Я загружаю test.html, используя javascript в DIV в Home.html. Когда я пытаюсь использовать getElementsByClassName для получения элемента в Test.html, он ничего не возвращает. Что я здесь делаю неправильно? Когда я нажимаю на URL -адресах на странице Home.html, он должен загружаться, как показано ниже справа? Почему не так?

Я просмотрел другие вопросы, размещенные здесь, но я не мог найти проблему. Я запускал это на хром в Windows 7.

Я новичок в разработке HTML, будьте осторожны!

Есть кое-что не так.

txt должен быть инициализирован пустой строкой, потому что вы добавляете к ней.

x не имеет свойств, называемых elements ; скорее это массив элементов, возвращаемых getElementsByClassName() , в этом случае они являются элементами, которые имеют свойство src .

Я не уверен, почему вы используете теги ‘;
document.getElementById(«txt»).innerHTML = txt;
>
function load_test() <
document.getElementById(«content»).innerHTML = »;
>

Есть несколько вопросов:

Переменная «txt» должна быть определена внутри функции «foo()»; вы пытаетесь определить его вне функции, но на самом деле вы определяете его здесь: txt = txt + x.elements[i].src + «
«; Но если вы определяете его здесь, само определение содержит себя ( txt = txt +. ), поэтому оно будет содержать слово «undefined». (Надеюсь, что это имело смысл.)

Код, который вы используете для получения источников изображения, неверен; вместо x.elements[i].src , используйте x[i].src .

Содержимое из вашего второго файла HTML должно быть загружено с помощью ajax. Для этого я бы создал скрытый div, чтобы вы могли загрузить содержимое из вашего второго файла HTML туда, а затем использовать его в своем скрипте. (В приведенном ниже примере я дал скрытый div .)

Здесь, как бы я изменил ваш скрипт:

И «новый» HTML для Home.html (только скрытый div внизу):

И вот скрипка (без части ajax — я не думаю, что вы можете сделать ajax с JSFiddle): http://jsfiddle.net/Niffler/pnv1jy1m/

(Я не знал, что вы делали с «объектом», поэтому в моем сценарии я изменил его, чтобы просто выводить текст. )

Источник

Команда 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 или просто querySelector который вместо HTMLCollection вернет только первый элемент, который соответствует селектору, так что вы можете вызвать click на это сразу

Источник