本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から2年以上経過しています。
これまで行ったヲタクライブの履歴をaboutページに時系列で記載していたのですが、縦に長くなりすぎたので年ごとに分割することにしました。
クリックすると履歴記載したhtmlを所定の場所に読み込んで表示します。まぁこんなんでええやろ・・・。
このページの一番下に実装しています。
const asyncLinks = document.querySelectorAll('.link-button');
function loadPage(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status === 200) {
const content = document.getElementById('history-content');
content.innerHTML = xhr.response;
} else {
console.error('Error loading page.');
}
};
xhr.send();
}
asyncLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
loadPage(this.href);
});
});