How can i call a function from within a for loop in javascript?

Question

let ti11 = document.createElement('input')
function hkRender() {

    window.game.mapSetup = {};
    mapContext = map.getContext('2d')

    // Styling the canvas background (works)

    mapContext.fillStyle = ti9.value

    game.mapSetup.loadMapColor = function(){
        ti9.value = localStorage.getItem('mmc')
        mapContext.fillStyle = ti9.value
    }
    window.game.mapSetup.changeMapColor = function(mapColor){
        let mmc = localStorage.getItem('mmc')
        mapContext.fillStyle = mmc
        localStorage.setItem('mmc', mapColor)
    }

    ti9.className = "jscolor {onFineChange:'window.game.mapSetup.changeMapColor(this.toHEXString())'}"

    ti9.value = localStorage.getItem('ti9val')
    ti9.onchange = function(){
      localStorage.setItem('ti9val', ti9.value)
    }
    game.mapSetup.loadMapColor()

    // Styling player text in canvas (doesnt work)

    for (let player in players) {
        let plr = players[player]


        // player name
        mapContext.fillStyle = ti11.value

        game.mapSetup.loadPlayerNameColor = function(){
            ti11.value = localStorage.getItem('mmn')
            mapContext.fillStyle = ti11.value
        }
        window.game.mapSetup.changePlayerNameColor = function(playerNameColor){
            let mmn = localStorage.getItem('mmn')
            mapContext.fillStyle = mmn
            localStorage.setItem('mmc', playerNameColor)
        }

    }

    ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"


    ti11.value = localStorage.getItem('ti11val')
    ti11.onchange = function(){
        localStorage.setItem('ti11val', ti11.value)
    }
    game.mapSetup.loadPlayerNameColor()
}

I want to style the property mapContext.fillStyle defined in //player name, but when calling the function to style, it applies to the mapContext.FillStyle of the map background instead of the name. How can i differentiate between the 2 similar properies?

Answer 1

define the function above the loop:

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = function(playerNameColor, mapContext){
       changeColour(playerNameColor, mapContext);
    }
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}

or:

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = changeColour(playerNameColor, mapContext);
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}