This forum uses cookies

Biwo · (Dieser Beitrag wurde zuletzt bearbeitet: 24.04.2022, 16:33 von admin.)

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!

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 = 
}

)
});

***admin*** · 24.04.2022, 16:38 - Wörter:

Kannst du das HTML mal dazu posten , dann kann man das testen.
Oder die Seite verlinken, wo du den Color Picker herhast.

this.style.backgroundcolor =farbcode;

Da wird wohl die Farbe reinmüssen, die du ausgewählt hast , oder der Farbcode worüber die Maus gerade ist.
Wäre gut wen man das mal testen kann , weil so wird es etwas schwer.

Biwo · 25.04.2022, 19:52 - Wörter:

Vielen Dank schonmal!!

Hierher ist der Colorpicker: GitHub - bebraw/colorjoe: Scaleable color picker with touch and AMD support (MIT)

GitHub - bebraw/colorjoe: Scaleable color picker with touch and AMD support (MIT…
Scaleable color picker with touch and AMD support (MIT) - GitHub - bebraw/colorjoe:…

Und das ist mein html:

<!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>

***admin*** · 26.04.2022, 09:24 - Wörter:

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.

***admin*** · 26.04.2022, 11:29 - Wörter:

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

Biwo · 26.04.2022, 19:58 - Wörter:

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:

[font=Consolas, "Courier New", monospace]let Cells = document.querySelectorAll('td');

Cells.forEach(function(elem) {
elem.addEventListener("onclick", function() {
this.style.backgroundcolor = document.getElementById("farbuswahl").value
}

)
});
[/font]

Achso, und kann ich hier irgendwo spenden? Das hat mir jetzt schon so sehr weitergeholfen!

***admin*** · 26.04.2022, 23:10 - Wörter:

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?

Biwo · 27.04.2022, 17:10 - Wörter:

Ja, das klappt alles einwandfrei!

Das wäre das html-file:

<!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:

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
}

)
});

***admin*** · 28.04.2022, 07:58 - Wörter:

Was meinst du mit einzelne Zellen ?
Da sind ja nur 3 Textfelder. Und die eine Farbe ändert sich ja

Biwo · 28.04.2022, 17:12 - Wörter:

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.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken