I was experimenting with DOM Manipulation, DOM Traversal, and event listeners when I ran into this problem. I created 3 squares of different colors all in javascript. I was trying to use event listener to move the squares 100px when I clicked them.
const body = document.body
body.style.width = '100%'
body.style.height = '100vh'
function moveSquare(x) {
x.style.left = '100px'
}
const greenSquare = document.createElement('div')
greenSquare.style.width = '100px'
greenSquare.style.height = '100px'
greenSquare.style.backgroundColor = 'Green'
greenSquare.style.margin = '30px'
greenSquare.style.position = 'relative'
greenSquare.style.left = '0px'
body.append(greenSquare)
greenSquare.addEventListener('click', moveSquare(greenSquare))
const blueSquare = document.createElement('div')
blueSquare.style.width = '100px'
blueSquare.style.height = '100px'
blueSquare.style.backgroundColor = 'Blue'
blueSquare.style.margin = '30px'
blueSquare.style.position = 'relative'
blueSquare.style.left = '0px'
body.append(blueSquare)
blueSquare.addEventListener('click', moveSquare(blueSquare))
const redSquare = document.createElement('div')
redSquare.style.width = '100px'
redSquare.style.height = '100px'
redSquare.style.backgroundColor = 'Red'
redSquare.style.margin = '30px'
redSquare.style.position = 'relative'
redSquare.style.left = '0px'
body.append(redSquare)
redSquare.addEventListener('click', moveSquare(redSquare))
Before this code, I made each square an individual function to move it, that worked. Could someone help me please.