如何在 javascript 中的 for 循环中调用函数

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()
}

我想设置在//player name 中定义的属性 mapContext.fillStyle 的样式，但是当调用函数进行样式设置时，它适用于地图背景的 mapContext.FillStyle 而不是名称。如何区分 2 个相似的项目？

Answer 1

定义循环上方的函数：

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()

}

或：

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()

}

Answer 2

只需移动变量： ti11.值在 for 循环上方声明它的范围之上。