如何在 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 而不是名称。我如何区分这两个相似的属性？

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.value 在 for 循环之上声明它在它的范围之上。

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

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

html

javascript

color-picker

game-development