Javascript full stack

1 day ago 1
ARTICLE AD BOX

I have an assignment on my University to make a full stack project including bootstrap, backend, database and frontend, I am trying to make my image change depending based on how many xpAutoclicker per second in game. I am no sure what is causing it but the image will not update even when we have reached the xp level.

``

//javascript function updateModifiers() { xpClickModifier = 1; xpAutoClickModifier = 1; xpAutoClickerBasePerSecond =0; for (let upgrade of upgrades) { if (gameState.upgradesPurchased[upgrade.id]) { xpClickModifier *= upgrade.clickMulti xpAutoClickModifier *= upgrade.cpsMulti } } for (let clicker of autoclickers){ xpAutoClickerBasePerSecond += clicker.cps * gameState.autoClickerAmounts[clicker.id] } xpAutoClickerPerSecond = xpAutoClickerBasePerSecond * xpAutoClickModifier; } function updateClickerImage(){ if (xpAutoClickerPerSecond >= 10) { document.getElementById("clickImg").src = "img/studentCoffeeCoffee.png"; } else if (xpAutoClickerPerSecond >= 5) { document.getElementById("clickImg").src = "img/studentCoffee.png"; } }

HTML:

<script src="/js/bootstrap.js" defer></script> <script src="js/script.js" defer></script> <button id="clickBtn" class="click-btn" type="button" > <img id="clickImg" src="img/student.png" alt="Student" /> </button> </div> </div> <div class="col-6"> <div class="upgrades" class="col col-lg-2"> <h2 class="text-center" class="col-md-auto">Upgrades</h2> <div id="upgradeContainer"></div> </div> <div class="autoClickers mt-4" class="col col-lg-2"> <h2 class="text-center" class="col-md-auto">Auto Clickers</h2> <div id="autoclickerContainer"></div> </div> </div> </div> </div> </body> </html>

Please let me know if I need to send more information its a big project :p

Read Entire Article