[shuffle]cannot read propety 'textcontent'
hello a tous je bute sur l'intégration de shuffle.js ...
https://www.com3elles.com/formation.html
la zone de recherche devrait être réactive ....
mais cela me renvois cette erreur
Citation:
Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLAnchorElement.<anonymous> (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:195)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at 769f626d67bfc69fcea38a9cdfa58d55_0.js:479
at Array.forEach (<anonymous>)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at Demo._handleSearchKeyup (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:180)
dans mon js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // Advanced filtering
Demo.prototype.addSearchFilter = function () {
var searchInput = document.querySelector('.js-shuffle-search');
if (!searchInput) {
return;
}
searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
/**
* Filter the shuffle instance by items with a title that matches the search input.
* @param {Event} evt Event object.
*/
Demo.prototype._handleSearchKeyup = function (evt) {
var searchText = evt.target.value.toLowerCase();
this.shuffle.filter(function (element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.picture-item__title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
}; |
Dans mon html la balise est ok
Code:
1
2
3
| <div class=" filters-group">
<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" placeholder="Rechercher">
</div> |
et à la fin de mon js
Code:
1
2
3
4
5
| document.addEventListener('DOMContentLoaded', function () {
window.demo = new Demo(document.getElementById('grid'));
}); |
Merci d'avance !
