CODEWITHSUNDEEP
javascripthtmldomupdating
valensh1
valensh1

Reputation: 25

Score in DOM not updating

Can't figure out why my score is not updating in the DOM. It updates correctly in the console when I print it out. Any help would be greatly appreciated!

Code below:

------HTML-----

<header>
    <h1 id="score">$0</h1>
    <h1>Welcome To The Landscaper Game</h1>
    <img id="landscaper"src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQquSwF4xk5fT2J1P3aUWEEOTIdDI4m2p6Iew&usqp=CAU" alt="picture of gardner">
    <button class="buttons" id="start-game">Click to Start Game</button>
</header>

-----Javascript----

let userEarnings = 0;
let scoreboardDOMLocation = document.getElementById('score').innerText
console.log(scoreboardDOMLocation);

const teethEarnings = () => {
    scoreboardDOMLocation = (userEarnings += earnings.teeth);
    console.log('You clicked on teeth');
    console.log(scoreboardDOMLocation);
}

document.getElementById('teethPic').addEventListener('click',teethEarnings);

Upvotes: 0

Views: 537

Answers (1)

mab0189
mab0189

Reputation: 136

@Andreas is correct. You only stored the text of the h1 html-element but no reference to the actual html-element. The code should look like this:

let scoreboardDOMLocation = document.getElementById('score');

const teethEarnings = () => {
    scoreboardDOMLocation.innerHTML = (userEarnings += earnings.teeth);
    console.log('You clicked on teeth');
}

document.getElementById('teethPic').addEventListener('click',teethEarnings);

Upvotes: 2

Related Questions