Как получить доступ к добавленным элементам с помощью php из javascript
Я работаю над небольшим проектом, и это мой первый, так что мне приходится преодолевать некоторые трудности. Я создаю динамический список для отфильтрованного поиска, и проблема в том, что я пытаюсь добавить элементы с помощью php, и я хочу, чтобы они изменяли видимость onclick, и для этого я использую код css, который полностью функционален, но проблема связана с javascript, который говорит мне:
script.js:4 Uncaught TypeError: Cannot read property 'classList' of null at visibilityToggle (script.js:4) at HTMLDivElement.onclick (afficherDept.php:4)
js_Code:
function visibilityToggle(id) {
var section = document.getElementById(id);
section.classList().toggle("showen");
}
и это PHP-код для добавления элементов: --- $ sectionID управляется циклом
echo '<div onclick = "visibilityToggle('.$sectionID.');"id='.$id.'>'.'ID
'.$dept["id"].'. NOM:'. $dept["nom"].'.CHEF:'.$dept["chef"].'</div>';
echo '<section class = "hidden" id=' . $sectionID . '>';
Также имейте в виду, что JavaScript и PHP никак не связаны друг с другом. Все, что видит JavaScript, - это результирующий HTML; ко времени появления JS PHP уже давно не существует. JS не знает (и не заботится), был ли HTML сгенерирован статически, PHP или каким-либо другим способом.
Кроме того, classList - это свойство, доступное только для чтения, а не функция. Таким образом, не следует использовать () после идентификатора.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Нет смысла вызывать функцию с onclick из элемента, а затем использовать document.getElementById для повторного поиска того же элемента ...
Вместо этого я бы добавил класс к вашим div на PHP и использовал бы javascript для добавления обработчика кликов. Таким образом, вы знаете, кто вызвал обработчик, и можете напрямую переключать класс CSS. (примечание: не тестировал это, но я надеюсь, что идея понятна)
PHP
echo '<div class = "clickablediv">simple example</div>';
JAVASCRIPT
let clickableDivs = document.getElementsByClassname("clickablediv")
for(let d of clickableDivs){
d.addEventListener("click", visibilityToggle)
}
function visibilityToggle(e) {
e.target.classList().toggle("showen");
}
Причина указанной ошибки - неправильная отрисовка html-разметки из вашего php-кода.
Вам нужно заключить в кавычки аргумент, переданный функции visibilityToggle.
'<div onclick = "visibilityToggle(\''. $sectionID. '\')"'
Затем classList - это объект DOMTokenList, а не функция.
Итак, вы должны получить доступ к свойству toggle следующим образом:
section.classList.toggle("showen");
thanks for all your answers. Я исправил проблему. В моей js-функции visibilityToggle идентификатором аргумента был элемент html, а не строка. я не знаю почему, но это работает
ну,
visibilityToggle('.$sectionID.');должен бытьvisibilityToggle(\''.$sectionID.'\');