I am relatively new to JS and HTML however I cannot understand how to fix the issue I am having, I assumed the issue is the script running before the page has loaded so have tried however I’m unsure what else I can do to fix it. I am trying to use a link found using the JS script and use it for an image in HTML. Using the console on the browser I keep getting the error “Uncaught (in promise) TypeError: document.getElementById(…) is null”
Any help would be appreciated.
MY JS
let accName = "aimxoo";
let accTag = "5600";
let region;
let puuid;
let playercard;
let character;
let mapname;
async function getInfo(accName, accTag){
let link = "https://api.henrikdev.xyz/valorant/v1/account/" + accName + "/" + accTag + "?force=false";
try {
const response = await fetch(link)
const info = await response.json();
region = info.data.region;
puuid = info.data.puuid;
} catch(err) {
console.error("ERROR1");
}
}
async function getMatchr(region, puuid) {
var mymatchid;
let link = 'https://api.henrikdev.xyz/valorant/v1/by-puuid/lifetime/mmr-history/' + region + '/' + puuid;
try {
const response = await fetch(link)
const info = await response.json();
mymatchid = info.data['0'].match_id;
mapname = info.data['0'].map.name;
} catch(err) {
console.error("ERROR2");
}
link = 'https://api.henrikdev.xyz/valorant/v2/match/' + mymatchid;
try {
const response = await fetch(link)
const info = await response.json();
var player = info.data.players.all_players;
var y;
for (let x = 0; x <20; x++){
if(player[x].puuid == puuid) {
y = x;
x=20;
};
}
var myplayer = player[y];
character = myplayer.character;
} catch(err) {
console.error("ERROR3");
}
}
async function getPlayerCard(puuid){
let link = "https://api.henrikdev.xyz/valorant/v1/by-puuid/account/" + puuid;
try {
const response = await fetch (link)
const info = await response.json();
playercard = info.data.card.small;
} catch(err) {
console.error("ERROR4");
}
};
async function placePlayerCard(){
await getPlayerCard (puuid);
document.getElementById("player-card").src = playercard;
}
async function runInfo() {
await getInfo(accName, accTag);
await getMatchr(region, puuid);
await placePlayerCard();
console.log(playercard);
}
window.addEventListener("DOMContentLoaded", runInfo);
runInfo();
and this is
MY HTML
<body>
<div class="overview">
<img src="" id="player-icon" width="100px">
</div>
<script src="player-data.js" defer></script>
</body>
</html>
