How do I update a value of an object without being inside of the object?-CodePudding

I'm currently trying to program a Tower Defense Game with the help of some youtube tutorials and previous experience. Now I tried to update the value of the Towers Radius by clicking a button but it does not seem to work:

let towerRadius = 250
class Building extends Sprite {
    constructor({position = {x: 0, y: 0}}) {
        super({position, imageSrc: 'img/tower.png', frames: {max: 19}, offset: {x: 0, y: -80}})
        this.width = 64 * 2
        this.height = 64
        this.center = {
            x: this.position.x   this.width / 2,
            y: this.position.y   this.height / 2,
        }
        this.projectiles = []
        this.radius = towerRadius
        this.target
    }
    draw() {
       super.draw()
      c.beginPath()
        c.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2)
        c.fillStyle = 'rgba(0, 0, 255, 0.15'
        c.fill()
    } 
    update() {
        this.draw()
        if (this.target || (!this.target && this.frames.current !== 0)) super.update()

        if (this.target && this.frames.current === 6 && this.frames.elapsed % this.frames.hold === 0) this.shoot()
        
    }
    shoot() {
        this.projectiles.push(
            new Projectile({
                position: {
                    x: this.center.x - 20,
                    y: this.center.y - 110
                },
                enemy: this.target
            })
        )
    }
}

let currentRangeUpgrade = 1
var upgradeTowerButton = document.getElementById("upgradeRangeButton")
upgradeTowerButton.addEventListener('click', (event) => {
    if(coins - currentRangeUpgrade * 100 >= 0) {
    coins -= currentRangeUpgrade * 100
    document.querySelector('#coins').innerHTML = coins
    towerRadius  = 1000
    document.querySelector('#upgradeRangeText').style.display = 'flex'
    setTimeout(function() {
    document.querySelector('#upgradeRangeText').style.display = 'none'
    }, 3000);
    currentRangeUpgrade  
    document.querySelector('#upgradeRangeButton').innerHTML = "UPGRADE RANGE: "   currentUpgrade * 100
    }
})

I tried changing the towerRadius by setting the initial radius of the object equal to towerRadius but it does not seem to change anything, even though the console logs the radius I'm trying to get.

CodePudding user response：

The problem in your code is that towerRadius is a primitive so it is passed by value. Once it has set this.radius to towerRadius, it never changes, whatever happens to towerRadius. To make it correct without changing code in your whole codebase, you could use a getter :

    constructor({position = {x: 0, y: 0}}) {
        super({position, imageSrc: 'img/tower.png', frames: {max: 19}, offset: {x: 0, y: -80}})
        this.width = 64 * 2
        this.height = 64
        this.center = {
            x: this.position.x   this.width / 2,
            y: this.position.y   this.height / 2,
        }
        this.projectiles = []
        // remove this line of code
        // this.radius = towerRadius
        this.target
    }

    // add this to your class so whenever it looks for radius, it recomputes it (here just by returning the global variable)
    get radius () {
        return towerRadius
    }

Hope it helped you !