Question

我正在尝试在JS中制作Paint，这是代码。例如，我想通过单击div“ red”将轨迹的颜色从黑色更改为红色，但我没有主意（没有jQuery）。

let active = false;
const draw = function(e) {
  if (active == false) {
    return;
  }

  const x = e.clientX;
  const y = e.clientY;
  let div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}

const drawActive = function() {
  active = !active
}

function changeColor() {
  //div.classList.add("mainColor");
}

document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);

body {
  height: 100vh;
  margin: 0;
}

#containter {
  width: 200px;
  height: 200px;
  border-radius: 0;
  background-color: #fff;
  position: fixed;
}

div {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
}

#red {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 0;
  margin-top: 18%;
}

.blue {
  width: 25px;
  height: 25px;
  background-color: blue;
  border-radius: 0;
  margin-top: 6%;
  margin-left: 12%;
}

.yellow {
  width: 25px;
  height: 25px;
  background-color: yellow;
  border-radius: 0;
  margin-top: 18%;
  margin-left: 12%;
}

.green {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 0;
  margin-top: 6%;
}

.first {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

.mainColor {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paint</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="containter">
    <div id="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>

我尝试使用setAttribute进行创建，但出现了一些错误。
我不知道应该提供哪些细节。
我不知道应该提供哪些细节。

@Edit 从评论：删除了6个重复...

Answer 1

我使用querySelectorAll查找所有div和添加的条件

if (!document.getElementById("containter").contains(item))

除div ID container中的内容以外。

document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
    item.setAttribute('class', 'mainColor');
})

let active = false;
const draw = function(e) {
  if (active == false || document.getElementById("containter").contains(e.target)) {
    return;
  }
  const x = e.clientX;
  const y = e.clientY;
  let div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}
const drawActive = function() {
  active = !active
}

function changeColor() {
  document.querySelectorAll('div').forEach(function(item) {
    if (!document.getElementById("containter").contains(item))
      item.setAttribute('class', 'mainColor');
  })
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);

body {
  height: 100vh;
  margin: 0;
}

#containter {
  width: 200px;
  height: 200px;
  border-radius: 0;
  background-color: #fff;
  position: fixed;
}

div {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
}

#red {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 0;
  margin-top: 18%;
}

.blue {
  width: 25px;
  height: 25px;
  background-color: blue;
  border-radius: 0;
  margin-top: 6%;
  margin-left: 12%;
}

.yellow {
  width: 25px;
  height: 25px;
  background-color: yellow;
  border-radius: 0;
  margin-top: 18%;
  margin-left: 12%;
}

.green {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 0;
  margin-top: 6%;
}

.first {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

.mainColor {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paint</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="containter">
    <div id="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

在onclick上绘制JS更改颜色

1 个答案: