我无法通过按钮设置<div>背景颜色

Question

我正在学习JavaScript，作为练习，我制作了一个简单版本的画图应用（没有使用Canvas）。这个项目非常简单。我创建了一个div作为画笔，当我开始绘图时，新的div会被创建。不幸的是，更改画笔颜色的按钮（div的颜色）不起作用。我非常想知道我犯了什么错误 :)

以下是我的代码：

let clicked = false;
const dane = function(e) {
  if (clicked == false) return;

  var x = e.clientX;
  var y = e.clientY;
  var div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}

const klik = function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}

const tak = function() {
  clicked = true;
}

const nie = function() {
  clicked = false;
}


function paint() {
  document.body.addEventListener("mousemove", dane);
  document.body.addEventListener("mousedown", tak);
  document.body.addEventListener("mouseup", nie);
  document.body.addEventListener("click", klik);
}

// change color below
let color = document.getElementsByTagName("div");

color.blue = function() {
  this.style.backgroundColor = "blue";
}

color.red = function() {
  this.style.backgroundColor = "red";
}

color.green = function() {
  this.style.backgroundColor = "green";
}

window.onload = paint;

body {
  background-color: black;
  height: 100vh;
  margin: 0;
  color: white;
}

div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
}

#btnblue {
  position: fixed;
  margin-top: 25px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: aqua;
  z-index: 100;
}

#btnred {
  position: fixed;
  margin-top: 150px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 100;
}

#btngreen {
  position: fixed;
  margin-top: 275px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  z-index: 100;
}

<button id="btnblue" onclick="blue();"></button>

<button id="btnred" onclick="red();"></button>

<button id="btngreen" onclick="green();"></button>

- Mr.Cheese

---

color.blue = function() { this.style.backgroundColor = "blue"; } 这段代码的作用是什么？它是在 HTML 集合中添加了一个 blue 属性，但从未调用过。 - connexo

Answer 1

你正在尝试调用函数，比如blue()，但是你将它们分配给了color.blue()，而且你设置了错误对象的背景颜色。

let color = document.getElementsByTagName("div");会获取文档中所有div元素。你为不同的颜色添加了这个集合的函数。然后，当你单击时，你添加了新的div，它们不属于该集合，因此它们没有那些函数。（注释表明这是错误的）

你想做的是只有一个变量来存储你想要的颜色，当你点击按钮时更改它，当你添加一个新的div时，只需在那时设置它的背景颜色即可。

let clicked = false;
const dane = function(e) {
  if (clicked == false) return;

  var x = e.clientX;
  var y = e.clientY;
  var div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  div.style.backgroundColor = color;
  document.body.appendChild(div);
}

const klik = function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  div.style.backgroundColor = color;
  document.body.appendChild(div);
}

const tak = function() {
  clicked = true;
}

const nie = function() {
  clicked = false;
}


function paint() {
  document.body.addEventListener("mousemove", dane);
  document.body.addEventListener("mousedown", tak);
  document.body.addEventListener("mouseup", nie);
  document.body.addEventListener("click", klik);
}

// change color below
let color = "aqua";

blue = function() {
  color = "aqua";
}

red = function() {
  color = "red";
}

green = function() {
  color = "chartreuse";
}

window.onload = paint;

body {
  background-color: black;
  height: 100vh;
  margin: 0;
  color: white;
}

div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
}

#btnblue {
  position: fixed;
  margin-top: 25px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: aqua;
  z-index: 100;
}

#btnred {
  position: fixed;
  margin-top: 150px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 100;
}

#btngreen {
  position: fixed;
  margin-top: 275px;
  margin-left: 25px;
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  z-index: 100;
}

<button id="btnblue" onclick="blue();"></button>

<button id="btnred" onclick="red();"></button>

<button id="btngreen" onclick="green();"></button>

- Trevin Avery

---

getElementsByClassName 获取的是一个 实时 的 HTMLCollection（与 querySelectorAll 获取的 NodeList 相反）。这意味着 DOM 中任何新的 DIV 立即成为集合的一部分，同时任何被移除的 DIV 也会从集合中移除。 - connexo

@connexo 哇，我不知道那个。我刚测试了一下，你是正确的，它确实会更新新的div。 - Trevin Avery

Answer 2

我不是很擅长这个，但我看到了多个问题。

• onclick="blue();" 不会起作用，因为不存在函数 blue()
• 函数 color.blue() 存在，但由于它是用 let 声明的，所以它将无法在 window 空间中访问，而 onClick 事件将在其中查找它
• this.style.backgroundColor 不起作用，因为 this 等于 color，而 color 等于 document.getElementsByTagName("div")，它返回一个 HTMLCollection，该集合有自己的函数 .item() 来获取项目
• 那个 div 到底在哪里？我在你的 HTML 中没有看到它。

所以这里是修复的版本https://jsfiddle.net/eqpkn153/1/
我没有改变或查看您的其他代码，所以不知道发生了什么，但按钮现在可以使用。它更改了我制作的文本的背景色，不确定您的最初想法是什么，但您可以自己实现。
我做的是：

• 在window.color中声明color
• 添加带有id message的

  文本

• color不等于document.getElementById("message")
• 必须将paint()调用从onload="paint();"移动到js文件末尾，因为jsfiddle.net不会那样工作。这只是因为jsfilddle.net，所以您可以在onload中保留您的paint()

- user2858047

---

这个不起作用。你必须能够使用鼠标点击在黑色区域中绘制，并使用先前选择的颜色。 - Pablo