Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

shar27

Ich bin noch ein Anfänger und versuche zu verstehen, wie ich die Rasterfarben für mein Etch-a-Sketch-Projekt ändern kann. Eine Anleitung wäre wunderbar.

Ich kann die Farbe des Hintergrunds der Seite ändern, ich kann auch die Farbe des Rasterrahmens ändern, jedoch nicht die Lücke zwischen den Rastern. Ich kann auch nicht trainieren, wie man eine Spur hinterlässt. CSS erlaubt nur Animation und Hover, was keine dauerhafte Spur hinterlässt. Also, ich kenne eine Funktion, die den Wert speichert.

Kann mir bitte jemand hervorheben, welcher Teil meines Codes falsch ist und warum er falsch ist und wenn Sie eine Online-Ressource haben, die ich lesen kann, damit ich die Funktion zum Hinterlassen einer Spur und zum Ändern der Farbe in jedem Raster erstellen kann, wäre ich für immer dankbar .

Hier ist mein Code:

//first div
let container = document.createElement('div')
container.setAttribute('id', 'container');
container.classList.add("grid");
document.body.appendChild(container);



//second div

let containerGrid = document.createElement('div')
containerGrid.setAttribute('id', 'containerGrid');
containerGrid.classList.add("grids");
document.body.appendChild(containerGrid);

//button div
let buttonDiv = document.createElement('div')
buttonDiv.setAttribute('id', 'button');
buttonDiv.classList.add("button");
document.body.appendChild(buttonDiv);


//buttons//

const eraserButton = document.createElement('button');
eraserButton.textContent ="Eraser";
eraserButton.classList.add ("Eraser")
eraserButton.setAttribute('id', 'Eraser');
const clearButton = document.createElement('button');
clearButton.classList.add ("Clear")

clearButton.setAttribute('id', 'Clear');
clearButton.textContent ="Clear";

buttonDiv.appendChild(eraserButton);
buttonDiv.appendChild(clearButton);

//hover color event

function random (number) {
  return Math.floor(Math.random() * (number +1));
}

const input = document.querySelectorAll('#col');

function rainbowColor () {
    const rndCol= 'rgb(' + random(255) + ',' + random(255) +',' + random (255) + ')';
containerGrid.col.style.BackgroundColor = rndCol;

}

input.onmouseover = (rainbowColor);

/*
const inputOne = document.querySelector('#color-picker');
inputOne.addEventListener('mouseover', e => {
    e.target.classList.add = ('color-picker');

});


const inputTwo = document.querySelector('#black-pick');
inputTwo.addEventListener('mouseover', e =>  {
    e.target.classList.add = ('black-pick');
});
*/
const btn = document.querySelector('#Eraser');
btn.addEventListener('click', function (e) {
    console.log(e);
});

const btnTwo = document.querySelector('#Clear');
btn.addEventListener('click', function (e) {
   console.log(e);
});

//make grid 16*16

function makeCols (col) {
    for (let i = 0; i < 16; i++) {
        const colDivs = document.createElement('div');
        colDivs.setAttribute('id', 'col');
        colDivs.classList.add('cols');
        colDivs.textContent ="";
        colDivs.style.border = ('solid');
        colDivs.style.display= ('grid');
        colDivs.style.padding = ('5px');
        containerGrid.appendChild(colDivs);
    }
}
makeCols (16);

function makeRows (rows) {
    for (let j = 0; j < 16; j++) {
        const rowDivs = document.createElement('div');
        rowDivs.setAttribute('id', 'rows');
        rowDivs.classList.add('rows');
        rowDivs.style.border = ('solid');
        rowDivs.style.display= ('grid');
        rowDivs.style.padding = ('5px');
               containerGrid.appendChild(rowDivs);
    }
}
makeCols (16);
makeRows(16);
.grid {

width:500px;

}

.grids {

    display: grid;
    justify-content:center;
    align-items:center;
    grid-template-columns: repeat(8,1fr);
    grid-auto-rows:repeat(8, 1fr);
    padding: 50px 50px;
    margin-left:150px;
    height:100px;
    width:200px;
 }

.rows {
    height:10px;
    width:10px;
    grid-column-gap:10px;

}
.cols {
    height:10px;
    width:10px;
}

.palette.cols:hover {
   background-color:rrggbb; 
}


.col {
    background-color:black;
}

.rows {
    background-color: red, black, blue, yellow, purple, green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id ="color-picker" class = "palette">
        <input type="color" name="Rainbow" id="rainbow-colors" value= "#e66465">
        <label for="Rainbow">Rainbow</label>
    </div>
        
    <div id = "black-pick" class = "black-color">
        <input type="color" name="Black" id="black-color" value="#rrggbb">
        <label for="Black">Black</label>
    </div>
    <script src="app.js"></script>
</body>
</html>

Peter Krebs

In wenigen Schritten behoben

  1. Weisen Sie zu, onmouseover nachdem Sie die HTML-Elemente erstellt haben.
  2. onmouseoverVerwenden Sie im Handler den Ereignisparameter, um das Element abzurufen
  3. Du hattest einen Tippfehler in der Hintergrundfarbe, es ist backgroundColor, Kleinbuchstabe first
  4. Ich habe die IDs eindeutig gemacht
  5. Ich habe den Selektor Ihres onmouseover-Handlers auf . geändert .cols
  6. Gefundene Elemente durchlaufen und onmouseover-Handler zuweisen

Für alles andere siehe Snippet unten.

//first div
let container = document.createElement('div')
container.setAttribute('id', 'container');
container.classList.add("grid");
document.body.appendChild(container);



//second div

let containerGrid = document.createElement('div')
containerGrid.setAttribute('id', 'containerGrid');
containerGrid.classList.add("grids");
document.body.appendChild(containerGrid);

//button div
let buttonDiv = document.createElement('div')
buttonDiv.setAttribute('id', 'button');
buttonDiv.classList.add("button");
document.body.appendChild(buttonDiv);


//buttons//

const eraserButton = document.createElement('button');
eraserButton.textContent ="Eraser";
eraserButton.classList.add ("Eraser")
eraserButton.setAttribute('id', 'Eraser');
const clearButton = document.createElement('button');
clearButton.classList.add ("Clear")

clearButton.setAttribute('id', 'Clear');
clearButton.textContent ="Clear";

buttonDiv.appendChild(eraserButton);
buttonDiv.appendChild(clearButton);

//hover color event

function random (number) {
  return Math.floor(Math.random() * (number +1));
}

function rainbowColor (e) {
    const rndCol= 'rgb(' + random(255) + ',' + random(255) +',' + random(255) + ')';
    e.target.style.backgroundColor = rndCol;
}

/*
const inputOne = document.querySelector('#color-picker');
inputOne.addEventListener('mouseover', e => {
    e.target.classList.add = ('color-picker');

});


const inputTwo = document.querySelector('#black-pick');
inputTwo.addEventListener('mouseover', e =>  {
    e.target.classList.add = ('black-pick');
});
*/
const btn = document.querySelector('#Eraser');
btn.addEventListener('click', function (e) {
    console.log(e);
});

const btnTwo = document.querySelector('#Clear');
btn.addEventListener('click', function (e) {
   console.log(e);
});

//make grid 16*16

function makeCols (col) {
    for (let i = 0; i < 16; i++) {
        const colDivs = document.createElement('div');
        colDivs.setAttribute('id', 'col' + i);
        colDivs.classList.add('cols');
        colDivs.textContent ="";
        colDivs.style.border = ('solid');
        colDivs.style.display= ('grid');
        colDivs.style.padding = ('5px');
        containerGrid.appendChild(colDivs);
    }
}
makeCols (16);

function makeRows (rows) {
    for (let j = 0; j < 16; j++) {
        const rowDivs = document.createElement('div');
        rowDivs.setAttribute('id', 'row' + j);
        rowDivs.classList.add('rows');
        rowDivs.style.border = ('solid');
        rowDivs.style.display= ('grid');
        rowDivs.style.padding = ('5px');
               containerGrid.appendChild(rowDivs);
    }
}

makeCols(16);
makeRows(16);

var inputs = document.querySelectorAll('.cols');
for(var k=0; k<inputs.length; k++) {
    inputs[k].onmouseover = rainbowColor;
}
.grid {

width:500px;

}

.grids {

    display: grid;
    justify-content:center;
    align-items:center;
    grid-template-columns: repeat(8,1fr);
    grid-auto-rows:repeat(8, 1fr);
    padding: 50px 50px;
    margin-left:150px;
    height:100px;
    width:200px;
 }

.rows {
    height:10px;
    width:10px;
    grid-column-gap:10px;

}
.cols {
    height:10px;
    width:10px;
}

.palette.cols:hover {
   background-color:rrggbb; 
}


.col {
    background-color:black;
}

.rows {
    background-color: red, black, blue, yellow, purple, green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id ="color-picker" class = "palette">
        <input type="color" name="Rainbow" id="rainbow-colors" value= "#e66465">
        <label for="Rainbow">Rainbow</label>
    </div>
        
    <div id = "black-pick" class = "black-color">
        <input type="color" name="Black" id="black-color" value="#rrggbb">
        <label for="Black">Black</label>
    </div>
    <script src="app.js"></script>
</body>
</html>

Verwandte Artikel

Wie kann man UILabel dazu bringen, die Größe besser zu ändern?

Sti Ich versuche , meine mehrzeilige zu machen , UILabelso klein wie möglich mit max-width gegeben, aber die sizeToFit()und sizeThatFits(_,_)Methoden gibt nicht die Ergebnisse , die ich will. Schauen Sie sich dieses Bild an: Das rote Rechteck repräsentiert die