Javascript 如何通过单击更改元素颜色_Javascript

Javascript 如何通过单击更改元素颜色

javascript

Javascript 如何通过单击更改元素颜色,javascript,Javascript,我知道这是基本的。你得原谅我。我是一名js的学生，我在这里遇到了一个难题所以。。。我有以下代码： <html> <head> <title>RocketSeat - Challenge 1</title> </head> <body> <button onclick="MakeSquare()" style="margin-to

我知道这是基本的。你得原谅我。我是一名js的学生，我在这里遇到了一个难题

所以。。。我有以下代码：

<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>


火箭卫星-挑战1
摆正
函数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'
setAttribute（'onmouseover'，'getRandomColor（）'））
elementBody.appendChild（方形）
}
函数getRandomColor（）{
var letters=“0123456789ABCDEF”；
var color=“#”；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]
}
square.style.backgroundColor=color//我知道这行不通——我只是把这个想法放在这里。
}

如您所见，按钮正在创建正方形。

现在-我遇到的问题是，当我用鼠标悬停时，它应该改变相应的方形背景色。我怎么做呢？我有给我一个hexcolor的函数，但我不知道如何设置元素的颜色。

代替

square.setAttribute（'onmouseover'，'getRandomColor（）'）

你需要使用AddEventListener，比如：

square.AddEventListener（'mouseover'，getRandomColor'）

**编辑：我让代码做了你想要的**


火箭卫星-挑战1
摆正
函数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（方形）
}
函数颜色（方形）{
var letters=“0123456789ABCDEF”；
var color=“#”；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]
}
square.style.backgroundColor=color//我知道这行不通——我只是把这个想法放在这里。
}

不要使用

square.setAttribute（'onmouseover'，'getRandomColor（）'）

您需要使用AddEventListener，如下所示：

square.AddEventListener（'mouseover'，getRandomColor'）

**编辑：我让代码做了你想要的**


火箭卫星-挑战1
摆正
函数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（方形）
}
函数颜色（方形）{
var letters=“0123456789ABCDEF”；
var color=“#”；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]
}
square.style.backgroundColor=color//我知道这行不通——我只是把这个想法放在这里。
}

在

MakeSqaure

函数中，执行以下操作，而不是

setAttribute

：

square.addEventListener('mouseover', getRandomColor)

然后：

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
}

函数getRandomColor（e）{ const letters=“0123456789ABCDEF”；让color=“#””；对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）] } e、 target.style.backgroundColor=颜色 } 完整内容：


火箭卫星-挑战1
摆正
函数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（方形）
}
函数getRandomColor（e）{
var letters=“0123456789ABCDEF”；
var color=“#”；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]
}
e、 target.style.backgroundColor=color//我知道这行不通——我只是把这个想法放在这里。
}

在

MakeSqaure

函数中，执行以下操作，而不是

setAttribute

：

square.addEventListener('mouseover', getRandomColor)

然后：

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
}


火箭卫星-挑战1
摆正
函数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（方形）
}
functi