Tabellenzellen füllen mit Colorpicker - kann jemand helfen? 2
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!
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/css_webseite/colorjoe.css">
<script src="/js_webseite/colorjoe.min.js"></script>
<style>
.ausblenden{
display:none;
}
#farbuswahl{
font-weight:900;
color:white;
}
table th{
background:lightgrey;
}
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
</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>
<script>
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;
let fa=document.getElementById('farbuswahl').value;
// this.style.backgroundColor = fa;
let vst=document.getElementById('v-stitches').value;
let hst=document.getElementById('h-stitches').value;
x++;
if(x==1){
document.getElementById('Pattern-Table').innerHTML=`<table>
<tr><th>Vertical Stitches</th><th>Horizontal Stitches</th><th>Farbauswahl</th></tr>
<tbody id="mehr">
</tbody>
</table>`;
}else if(x>1){
document.getElementById('mehr').innerHTML+=`<tr><td>${vst}</td><td>${hst}</td><td style="background:${fa}">${fa}</td></tr>`;
}
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');
var x=0;
Cells.forEach(function(elem) {
elem.addEventListener("click", function() {
}
)
});
</script>
</body>
</html>