How to change elements color with a click

Question

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.

use CSS :hover. No need to use JS developer.mozilla.org/en-US/docs/Web/CSS/:hover — Roko C. Buljan
– Roko C. Buljan, Commented Aug 1, 2020 at 23:13
PS, your question title states you're looking for a click, than in your question you're asking for hover... — Roko C. Buljan
– Roko C. Buljan, Commented Aug 1, 2020 at 23:14

Getter Jetter · Accepted Answer · 2020-08-01 23:27:11Z

2

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>

edited Aug 1, 2020 at 23:27

answered Aug 1, 2020 at 23:17

Getter Jetter

2,0811 gold badge22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Getter Jetter Over a year ago

@KajiyamaVK yw, just ask if you have some questions about how and why.

Jannes Carpentier · Accepted Answer · 2020-08-01 23:25:43Z

Ìnstead of square.setAttribute('onmouseover','getRandomColor()') you need to use AddEventListener, like this: square.addEventListener('mouseover',getRandomColor).

** Edit: I made the code do what you wanted **

<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', () => giveSquareRandomColor(square));
            elementBody.appendChild(square)
        }

        function giveSquareRandomColor(square) {
            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>

Collectives™ on Stack Overflow

How to change elements color with a click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related