I am able to load my javascript functions on the local machine (local host). But on github pages, it is not working (but marked as successfully pushed and “deployed”.)
I have included the file in tags.html as
<script>
$(document).ready(function() {
let currentTag = "";
const queryTag = getQuery().tag;
if (queryTag) {
currentTag = queryTag;
filterByTagName(currentTag)
}
//binding event
$(".tag").click((e) => {
currentTag = e.target.dataset.tag;
filterByTagName(currentTag);
updateQueryString(currentTag);
})
});
function getQuery() {
var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(str, key, value) {
params[key] = value;
}
);
return params;
}
function updateQueryString(tagName) {
const path = `${location.protocol}//${location.host}${location.pathname}?tag=${tagName}`;
window.history.replaceState({ path }, '', path);
}
function filterByTagName(tagName) {
$('.hidden').removeClass('hidden');
$('.post-list').each((index, elem) => {
//elem -> element (ex. div) has data-tag1
if (!elem.hasAttribute(`data-${tagName}`)) {
$(elem).addClass('hidden');
}
});
$(`.tag`).removeClass('selected');
$(`.tag[data-tag=${tagName}]`).addClass('selected');
}
</script>
The page I need to fix is https://popla0428.github.io/tags/
The code is at https://github.com/popla0428/popla0428.github.io
–> At this tag page, I want to filter the posts by tag icon, and that’s why I add the above.
Any help would be appreciated. Thanks in advance.