Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Tabellenzellen füllen mit Colorpicker - kann jemand helfen?
#1
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 =
}

)
});
Zitieren


Nachrichten in diesem Thema
Tabellenzellen füllen mit Colorpicker - kann jemand helfen? - von Biwo - 24.04.2022, 12:50

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste