I want to create two similar tables and do different things to them so I created two handlebars templates, each with their own script id to distinguish between them. I'm also fetching data from a db to fill in the template, and have two handlebars functions that are identical besides the function name and their respective script ids
If I only call one of the tables, it works fine, but when I call both, I get an error saying "Uncaught (in promise) TypeError: Cannot read property 'textContent' of null" and points to the "documentGetElementById" line of the second function, regardless of what order the functions are in.
Why might this be and how do I fix it? It seems like once the first function is read, it ignores the second or something which is why getElementById can't find anything?
HTML:
<div class="topScores">
<script id="top-scores" type="text/x-handlebars-template">
<table>
...
</table>
</script>
</div>
<div class="recentScores">
<script id="recent-scores" type="text/x-handlebars-template">
<table>
...
</table>
</script>
</div>
JS:
function listTopScores(id, scores){
let target = document.getElementById(id);
let template = Handlebars.compile(document.getElementById("top-scores").textContent);
let content = template({'scores', scores});
target.innerHTML = content;
}
function listRecentScores(id, scores){
let target = document.getElementById(id);
let template = Handlebars.compile(document.getElementById("recent-scores").textContent);
let content = template({'scores', scores});
target.innerHTML = content;
}
function loadScores(){
fetch('js/scores.json')
.then(response) => {
return response.json()
})
then((data) => {
listTopScores("content", data);
listRecentScores("content", data);
})
}
window.onload = function() {
loadScores();
}