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

Question

我正在学习 javascript，作为练习，我制作了一个糟糕的 Paint 版本(没有 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>

Answer 1

当您将它们分配给 color.blue() 时，您正在尝试调用类似 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>