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

shar27 Gepostet am Dev

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

Weisen Sie zu, onmouseover nachdem Sie die HTML-Elemente erstellt haben.
onmouseoverVerwenden Sie im Handler den Ereignisparameter, um das Element abzurufen
Du hattest einen Tippfehler in der Hintergrundfarbe, es ist backgroundColor, Kleinbuchstabe first
Ich habe die IDs eindeutig gemacht
Ich habe den Selektor Ihres onmouseover-Handlers auf . geändert .cols
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>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2021-09-8

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Wie ändere ich den Paginator?

TOP Liste

Artikel

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

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

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Eclipse Oxygen - Projekte verschwinden

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Wie kann ich den Kaskadenmodus global einstellen?

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Modbus Python Schneider PM5300

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Ärgerliches Problem mit yaml, das ich nicht lösen kann

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

Wie kann ich meine Tabelle abfragen, um sie in mySQL nach 2 Feldern zu gruppieren?

Wie kann eine gleichmäßige Lastverteilung in ElasticSearch mit Indizes mit unterschiedlicher Anzahl von Shards erreicht werden?

ElasticSeach Auto Complete mit dem Vervollständigungsvorschlag, um das vollständige Dokument zurückzugeben

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

Wie wählt man Unterschiede mit drei Tabellen aus?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um