I know this is basic. You’ll have to excuse me. I’m a js student and I’m having such a hard time with an issue here. So… I have this code: As you can see, the button is creating squares. Now – the issue that I’m having is that it is suppose to change the respective […]

How to change elements color with a click

I know this is basic. You’ll have to excuse me. I’m a js student and I’m having such a hard time with an issue here.

So… I have this code:

<html>
    <head>
        <title>RocketSeat - Challenge 1</title>
    </head>
    <body>
 
        <button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>

    </body>
    <script>
        function MakeSquare(){
            const square = document.createElement('div')
            const elementBody = document.querySelector('body')
            square.style.backgroundColor ='red'
            square.style.width = '50px'
            square.style.height = '50px'
            square.style.marginTop= '50px'
            square.setAttribute('onmouseover','getRandomColor()')
            elementBody.appendChild(square)
        }

        function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)]
                }
            square.style.backgroundColor = color // I know this is not gonna work - I just put here to give the idea. 
        }
    </script>
</html>

As you can see, the button is creating squares. Now – the issue that I’m having is that it is suppose to change the respective square backcolor as I hover it with my mouse. How could I do it? I have the function to give me a hexcolor but I don’t know how to set the element color.

Answer

In your MakeSqaure function do the following instead of the setAttribute:

square.addEventListener('mouseover', getRandomColor)

and then:

function getRandomColor( e ) {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  e.target.style.backgroundColor = color
}

Full thing:

<html>
    <head>
        <title>RocketSeat - Challenge 1</title>
    </head>
    <body>
 
        <button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>

    </body>
    <script>
        function MakeSquare(){
            const square = document.createElement('div')
            const elementBody = document.querySelector('body')
            square.style.backgroundColor ='red'
            square.style.width = '50px'
            square.style.height = '50px'
            square.style.marginTop= '50px'
            square.addEventListener('mouseover',getRandomColor)
            elementBody.appendChild(square)
        }

        function getRandomColor( e ) {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)]
                }
            e.target.style.backgroundColor = color // I know this is not gonna work - I just put here to give the idea. 
        }
    </script>
</html>

Advertisement

Answer