e.target.style.backgroundColor is not a function TypeError-CodePudding

New to JS. For my etch-a-sketch project i cant seem to set a style on my grid divs when the color mode is active and the mouse goes over them. Been trying to fuck around with the scopes but im still getting used to it. TypeError e.target.style.backgroundColor is not a function.

const colorBtn = document.getElementById('color')
const shadeBtn = document.getElementById('shade')
const eraseBtn = document.getElementById('erase')
const clearBtn = document.getElementById('clear')
const gridCont = document.getElementById('grid')
let currentMode = ''
let gridSquare = document.createElement('div')

// creates grid on pageload
function makeGrid() {
    for (i=0; i<200; i  ) {
        gridSquare
        gridCont.appendChild(gridSquare)
        gridSquare.classList.add('gridSquare')

    }
}

window.onload = makeGrid()
//

colorBtn.addEventListener('click', () => {
    currentMode = 'color'
})

shadeBtn.addEventListener('click', () => {
    currentMode = 'shade'
})

eraseBtn.addEventListener('click', () => {
    currentMode = 'erase'
})

clearBtn.addEventListener('click', () => {
    gridSquare.style.backgroundColor('white')
})

function play() {
    if ( currentMode === 'color' || currentMode === '') {
        gridSquare.addEventListener('mouseover', (e) => {
            e.target.style.backgroundColor('#050505')
        })
    }
}

window.onload = play()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scribblyscrabblydoo</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div >
        <h1>sribblyscrabblydoo</h1>
        <p>Draw or something idk bro</p>
    </div>
    <div >
        <div >
            <div >
                <h2>Options</h2>
            </div>
            <div >
                <button id="color">Color</button>
            </div>
            <div >
                <button id="shade">Shade</button>
            </div>
            <div >
                <button id="erase">Erase</button></div>
            <div >
                <button id="clear">Clear</button>
            </div>
            <div >
                <button id="github">Duskope Github</button>
            </div>
        </div>
        <div id="grid"></div>
    </div>
</body>
<script type="text/javascript" src = "index.js"></script>
</html>

blah blah blah too much code not enough details to post

CodePudding user response：

Because it's not a function.

You should use:

e.target.style.backgroundColor = '#050505'

CodePudding user response：

The error description is telling you the exact issue, you are calling backgroundColor as a function when it is a property.