Using JS to to insert text in a div based on condition

Right now, my solution has been to use visibility conditions to hid two different spans with “W” and “L”, but I was trying to use the code embed to use JS that would compare scores and insert a W or L and show a hidden div. I am a complete novice at JS, but ChatGPT got me a script that only worked when I would refresh the page like 4-5 times. My code embed was inside the scorecard wrapper… was it the wrong placement? Wrong code? thank you for your help!

This was my JS

// Get the dynamic data (scores in this case)
let team1Score = parseInt(document.getElementById(‘team1-score’).textContent);
let team2Score = parseInt(document.getElementById(‘team2-score’).textContent);

// Compare the scores and insert ‘W’ or ‘L’ in the result div
if (team1Score > team2Score) {
document.getElementById(‘result’).textContent = “W”; // Team 1 wins
} else if (team1Score < team2Score) {
document.getElementById(‘result’).textContent = “L”; // Team 1 loses
} else {
document.getElementById(‘result’).textContent = “T”; // Tie
}

// Only show the result div if it contains a value
if (document.getElementById(‘result’).textContent !== “”) {
document.getElementById(‘result’).style.display = “block”; // Show the result
} else {
document.getElementById(‘result’).style.display = “none”; // Hide if no result
}