0

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.

Ethan
  • 17
  • 3

0 Answers0