46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
|
document.getElementById('catalog-button').addEventListener('click', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
// Insert the loading.gif
|
||
|
|
let resultSection = document.getElementById('resultSection');
|
||
|
|
resultSection.innerHTML = '';
|
||
|
|
let imgElement = document.createElement('img');
|
||
|
|
imgElement.src = 'img/checking.gif';
|
||
|
|
imgElement.style.width = '500px';
|
||
|
|
imgElement.style.height = '500px';
|
||
|
|
imgElement.style.display = 'block';
|
||
|
|
imgElement.style.marginLeft = 'auto';
|
||
|
|
imgElement.style.marginRight = 'auto';
|
||
|
|
resultSection.appendChild(imgElement);
|
||
|
|
|
||
|
|
fetch(`${window.BASE_URL}/rules/creature`)
|
||
|
|
.then(response => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error('Network response was not ok');
|
||
|
|
}
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
resultSection.innerHTML = ''; // Clear results
|
||
|
|
|
||
|
|
// Generate clickable elements for each creature
|
||
|
|
let table = document.createElement('table');
|
||
|
|
data.forEach(item => {
|
||
|
|
let row = document.createElement('tr');
|
||
|
|
let cell = document.createElement('td');
|
||
|
|
let btn = document.createElement('button');
|
||
|
|
btn.textContent = item;
|
||
|
|
btn.addEventListener('click', function () {
|
||
|
|
document.getElementById('creature').value = item;
|
||
|
|
document.getElementById('search-button').click();
|
||
|
|
});
|
||
|
|
cell.appendChild(btn);
|
||
|
|
row.appendChild(cell);
|
||
|
|
table.appendChild(row);
|
||
|
|
});
|
||
|
|
resultSection.appendChild(table);
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('There has been a problem with your fetch operation:', error);
|
||
|
|
});
|
||
|
|
});
|