Changing Image Brightness and Linking on Achievement in a Game

Code Help HTML/CSS/JS
1

Question:
In my game I have an achievement system (game.achievementsEarned), which translates to game.completetionPercentage, when game.completetionPercentage >= to 75, I want stoneageImg on civInfo.html to change it’s brightness from 0% to 100%, and once it’s brightness has changed, when you click on it it takes you to stoneage.html

Repl link:
https://replit.com/@JohnnySuriano/Cycle-Clicker#civInfo.html

let game = {
  score: 0,
  totalScore: 0,
  totalClicks: 0,
  clickValue: 1,
  version: 0.000,
  achievementsEarned: 0,
  completionPercentage: 0,
}

//Dosen't work
if (pathname == '/civInfo.html') {
  console.log('step 1')
  if (game.completionPercentage >= 75) {
    console.log('step 2')
    document.getElementById('stoneageImg').style.filter = 'brightness(100%)'
  }
2

Hello @JohnnySuriano, and welcome to the forums. Could you please state the line and file that the 2 code snippets are in? Also, is anything showing up in the console?

3

Just realized that you had another post. In order to reference a variable in a different js file, you have to use the import and export statement. Define the variable you want to export to another file inside of the export statement like this:

File1.js:

export var variableIWantToSwitch = value;

Then in the other file, import the variable, making sure to also include the file name

File2.js:

import variableIWantToSwitch from "./file1.js";