Как, если цель в js - PullRequest
Новая
       41

Как, если цель в js

1 голос
/ 25 апреля 2020

Я пытаюсь отладить программу рисования, которую пишу. Я увидел, что если я не нажму или перетащу вместо того, чтобы просто щелкнуть один из элементов div, представляющих пиксели на моем холсте, цвет фона будет применен ко всему холсту, а не только к одному div.

Я пытаюсь использовать оператор if, но не решил мою проблему. Я должен решить проблему, не касаясь html или CSS. 

let canvas = document.getElementById("pixelCanvas");

function makePixel(){

let pixelMeasurement = document.getElementById("inputPixel").value;
let newPixel = document.createElement("div");

newPixel.style.width = pixelMeasurement + "px";
newPixel.style.height = pixelMeasurement + "px";
newPixel.style.cssFloat = "left";
newPixel.id = "pixel"

return newPixel;

}


function makeLine(){

let line = document.createElement("div");
let gridWidth = document.getElementById("inputWidth").value;

for (w = 0; w < gridWidth; w++){
    line.appendChild(makePixel());
}

return line;

}


function makeGrid(a) {

a.preventDefault();
let canvas = document.getElementById("pixelCanvas");
canvas.innerHTML = "";
let gridHeight = document.getElementById("inputHeight").value;

for (h = 0; h < gridHeight; h++){
    canvas.appendChild(makeLine());
}

return canvas;
}


/*function colorPixel(event) {
let color = document.getElementById("colorPicker").value;

if event.target == document.getElementById("pixel") {
    event.target.style.backgroundColor = color;
    console.log("A paragraph was clicked")
}

return color
}*/

function colorPixel(event) {
let color = document.getElementById("colorPicker").value;

event.target.style.backgroundColor = color;
console.log("A paragraph was clicked")

return color
}


inputs = document.getElementById("sizePicker").querySelectorAll("input");
inputs[3].addEventListener("click", makeGrid);

canvas.addEventListener("click", colorPixel);
...