+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? (/showthread.php?tid=558)
Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - Biwo - 24.04.2022
Hallo zusammen!
Ich hab vor Kurzem angefangen Javascript zu lernen und möchte ein kleines Programm schreiben, mit dem man Strickmuster planen kann.
Dazu frage ich in zwei Formularen ab, wie viele Maschen der oder die NutzerIn in Breite und Höhe haben möchte.
Den Colorpicker habe ich aus einem Tutorial. Mir geht es vor allem um den letzten Absatz, wo ich einfach nicht weiter weiß (this.style.backgroundcolor= XXX?)
Über Hinweise und Tipps wäre ich Sau dankbar! Vielen Dank schonmal!
Code:
let elementsArray = document.querySelectorAll('input[type="number"]');
elementsArray.forEach(function(elem) {
elem.addEventListener("change", function() {
document.getElementById("Pattern-Table").innerHTML=" ";
let row = document.getElementById("h-stitches").value;
let col = document.getElementById("v-stitches").value;
let table = document.createElement('table');
for(i=0; i<row; i++) {
let tr = document.createElement('tr');
for(j=0; j<col; j++) {
let td = document.createElement('td');
td.innerHTML = " ";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("Pattern-Table").appendChild(table);
});
});
class ColorPicker {
constructor(root) {
this.root=root;
this.colorjoe = colorjoe.rgb(this.root.querySelector(".colorjoe"));
this.selectedColor = null;
this.savedColors = this.getSavedColors();
this.colorjoe.show();
this.setSelectedColor("#009578");
this.colorjoe.on("change", color => {
this.setSelectedColor(color.hex(), true);
});
this.root.querySelectorAll(".saved-color").forEach((element, i) => {
this.showSavedColor(element, this.savedColors[i]);
element.addEventListener("mouseup", e => {
if (e.button == 1) {
this.saveColor(this.selectedColor, i);
this.showSavedColor(element, this.selectedColor);
}
this.setSelectedColor(element.dataset.color);
});
});
}
setSelectedColor(color, skipCjUpdate = false) {
this.selectedColor = color;
this.root.querySelector(".selected-color-text").textContent = color;
this.root.querySelector(".selected-color").style.background = color;
if (!skipCjUpdate) {
this.colorjoe.set(color);
}
}
getSavedColors() {
const saved = JSON.parse(localStorage.getItem("colorpicker-saved") || "[]");
console.log(saved);
return new Array (5).fill("#ffffff").map((defaultColor, i) => {
return saved[i] || defaultColor;
})
}
showSavedColor(element, color) {
element.style.background = color;
element.dataset.color = color;
}
saveColor(color, i) {
this.savedColors[i] = color;
localStorage.setItem("colorpicked-saved", JSON.stringify(this.savedColors));
}
}
const cp = new ColorPicker(document.querySelector(".container"));
$('table').on('click', "td", function() {
$(this).toggleClass("color");
});
let Cells = document.querySelectorAll('td');
Cells.forEach(function(elem) {
elem.addEventListener("onclick", function() {
this.style.backgroundcolor =
}
)
});RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - admin - 24.04.2022
Kannst du das HTML mal dazu posten , dann kann man das testen.
Oder die Seite verlinken, wo du den Color Picker herhast.
Code:
this.style.backgroundcolor =farbcode;Wäre gut wen man das mal testen kann , weil so wird es etwas schwer.
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - Biwo - 25.04.2022
Vielen Dank schonmal!!
Hierher ist der Colorpicker: GitHub - bebraw/colorjoe: Scaleable color picker with touch and AMD support (MIT)
Und das ist mein html:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Comptible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Pattern-Creator.css"/>
<link rel="stylesheet" href="colorjoe.css">
<script src="colorjoe.min.js"></script>
</head>
<body>
<h1>Pattern Creator</h1>
<main class="Pattern-Creator">
<div id="Pattern-Table">
</div>
<div class="settings">
<form>
<label for="h-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
<label for="v-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br>
</form>
<div class="container">
<div class="colorjoe"></div>
<div class="config"></div>
<div class="config-title">Selected Color</div>
<div class="selected-color-text"></div>
<div class="selected-color"></div>
<div class="config-title">Saved Colors</div>
<div class="saved-color"></div>
<div class="saved-color"></div>
<div class="saved-color"></div>
<div class="saved-color"></div>
<div class="saved-color"></div>
</div>
</div>
<script type="text/javascript" src="Untitled-1.js"></script>
</main>
</body>
</html>RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - admin - 26.04.2022
Das von GitHub läuft ja, das ist kein Problem.
Du willst das bestimmt genau so haben, oder?
Ein Button wo die Farbauswahl kommt , und wenn du drauf drückst soll die Farbe neben den Button stehen oder?
Wenn nicht, dann erklär mal etwas.
Ich mache dir das kurz , weil ich denke das es einfacher geht.
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - admin - 26.04.2022
Ich habe mal einen zusammen gebaut, wie ich mir das so gedacht habe
Klicke auf das Feld mit dem Farbfeld, dann kommt die Farbauswahl.
Nach der Farbauswahl klickst du wieder das Textfeld an und die Farbauswahl verschwindet wieder
Teste es doch einfach mal
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - Biwo - 26.04.2022
Oh man, genial! Vielen, vielen Dank.
Ich hab das jetzt genauso übertragen, am letzten Schritt scheitere ich gerade leider immer noch, also die einzelnen Zellen dann zu färben.
Ich hab jetzt das hier geschrieben, aber finde den Fehler nicht:
let Cells = document.querySelectorAll('td');
Cells.forEach(function(elem) {
elem.addEventListener("onclick", function() {
this.style.backgroundcolor = document.getElementById("farbuswahl").value
}
)
});
Achso, und kann ich hier irgendwo spenden? Das hat mir jetzt schon so sehr weitergeholfen!
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - admin - 26.04.2022
Kannst du mal deinen ganzen Code posten, wie du es jetzt hast?
Weil so sehe ich jetzt nichts.
Ändert sich der Farbcode den , also die Schrift in dem Feld?
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - Biwo - 27.04.2022
Ja, das klappt alles einwandfrei!
Das wäre das html-file:
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Pattern-Creator.css"/>
<link rel="stylesheet" href="colorjoe.css">
<script src="colorjoe.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css">
<script src="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.min.js"></script>
<style>
.ausblenden{
display:none;
}
#farbuswahl{
font-weight:900;
color:white;
}
</style>
</head>
<body>
<h1>Pattern Creator</h1>
<main class="Pattern-Creator">
<div id="Pattern-Table">
</div>
<div class="settings">
<form>
<label for="h-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
<label for="v-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br><label> Farbauswahl</label>
<input type="text" id="farbuswahl" placeholder="auswahl...">
</form>
<div id="colormodal" class="container ausblenden">
<div class="colorjoe"></div>
</div>
<script type="text/javascript" src="Untitled-2.js"></script>
</main>
</body>
</html> und JS hab ich jetzt auch alles in eine Datei gepackt:
Code:
let elementsArray = document.querySelectorAll('input[type="number"]');
elementsArray.forEach(function(elem) {
elem.addEventListener("change", function() {
document.getElementById("Pattern-Table").innerHTML=" ";
let row = document.getElementById("h-stitches").value;
let col = document.getElementById("v-stitches").value;
let table = document.createElement('table');
for(i=0; i<row; i++) {
let tr = document.createElement('tr');
for(j=0; j<col; j++) {
let td = document.createElement('td');
td.innerHTML = " ";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("Pattern-Table").appendChild(table);
});
});
class ColorPicker {
constructor(root){
this.root = root;
this.colorjoe = colorjoe.rgb(this.root.querySelector('.colorjoe'));
this.selectedColor = null;
this.savedColors = this.getSavedColors();
this.colorjoe.show();
this.setSelectedColor('#009578');
this.colorjoe.on('change',color => {
this.setSelectedColor(color.hex(),true);
});
this.root.querySelectorAll('.saved-color').forEach((element,index) => {
this.showSavedColor(element,this.savedColors[index]);
element.addEventListener('mouseup',event => {
if(event.button == 1){
this.saveColor(this.selectedColor,index);
this.showSavedColor(element,this.selectedColor);
} this.setSelectedColor(element.dataset.color);
});
});
}
setSelectedColor(color,skipCjUpdate = false){
this.selectedColor = color;
document.querySelector('#farbuswahl').value = color;
document.querySelector('#farbuswahl').style.backgroundColor = color;
if(!skipCjUpdate){
this.colorjoe.set(color);
}
}
getSavedColors(){
const saved = JSON.parse(localStorage.getItem('colorpicker-saved') || '[]');
return new Array(5).fill('#ffffff').map((defaultColor,index) => {
return saved[index] || defaultColor;
});
}
showSavedColor(element,color){
element.style.backgroundColor = color;
element.dataset.color = color;
}
saveColor(color,index){
this.savedColors[index] = color;
localStorage.setItem('colorpicker-saved',JSON.stringify(this.savedColors));
}
}
const colorPicker = new ColorPicker(document.querySelector('.container'));
document.querySelector('#farbuswahl').addEventListener('click',function(){
let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
});
let Cells = document.querySelectorAll('td');
Cells.forEach(function(elem) {
elem.addEventListener("click", function() {
this.style.backgroundColor = document.getElementById('#farbuswahl').value
}
)
});RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - admin - 28.04.2022
Was meinst du mit einzelne Zellen ?
Da sind ja nur 3 Textfelder. Und die eine Farbe ändert sich ja
RE: Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - Biwo - 28.04.2022
Vor dem Colorpicker-Teil in Javascript hab ich was geschrieben, damit aus den ersten zwei Formularwerten eine Tabelle erstellt wird.
Und aus dem Feld mit dem Hex-Code würde ich gerne per Klick einzelne Zellen einfärben können.