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

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

Answer 2

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

onclick="blue();"将不起作用，因为不存在功能blue()
函数color.blue()确实存在，但是由于它是用let词声明的，因此在window的空间中是无法访问的，onClick甚至会在其中寻找
this.style.backgroundColor将不起作用，因为this等于color等于document.getElementsByTagName("div")，它将返回具有其自身功能HTMLCollection的{{1}}获取物品
.item()到底在哪里？我在您的HTML中看不到它。

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

在div中被宣布为color
添加了ID为window.color的{{1}}文本
h1不等于message
由于我认为jsfiddle.net无法正常工作，因此无法将color调用从document.getElementById("message")移到js文件的末尾。只是因为jsfilddle.net，所以您可以将paint()保留在onload="paint();"

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

2 个答案: