Aufgabe 1.3
function elementenBeimKlickenAusblenden(){ //event listener auf alle elements document.querySelector("*").addEventListener("click", function(e){ //geklicktes Element in variabel this_element speichern var this_element = e.target; if (this_element.style.display === "none") { //einblenden this_element.style.display = "block"; } else { //ausblenden this_element.style.display = "none"; } }); }
Aktualisierte Version hier unten
function elementenBeimKlickenAusblenden(){ //event listener auf alle elements document.querySelector("*").addEventListener("click", function(e){ //geklicktes Element in variabel this_element speichern var this_element = e.target; if (this_element.style.visibility == "hidden") { //einblenden this_element.style.visibility = 'visible'; } else { //ausblenden this_element.style.visibility = 'hidden'; } }); }
2.1 Farbauswahl
JS
function calculateColor(){ var r_komponent = document.getElementById("input_element_1").value; var g_komponent = document.getElementById("input_element_2").value; var b_komponent = document.getElementById("input_element_3").value; var rgb_color = "#"+r_komponent+""+g_komponent+""+b_komponent; document.getElementById("div_mit_farbe").style.backgroundColor = rgb_color; // Werte Ausgeben var hexa_aequivalent = rgbToHex(r_komponent, g_komponent, b_komponent); document.getElementById("hexa_code").innerHTML = 'RGB: '+rgb_color+'<br>HEX: '+hexa_aequivalent; } function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } /** * umwandlung rgb in hex * mit jedem komponent als Parameter */ function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); }
HTML
<div style="width: 100%; height: 80px; text-align: center; color: #fff; background-color: #E8C4AE;" id="div_mit_farbe"> Element mit ändernbarer Farbe <p id="hexa_code"></p></div> <!-- Drei Input Elemente vom Typ Number --> <form method="get" action="#"> <!-- input mit der zahl 0 als minimum und 9 als max weil 1 ziffer zahlen benotigt sind --> <p> <label>Komponent der roten Farbe</label> <input type="number" onchange="calculateColor()" id="input_element_1" min="0" max="9" placeholder="Farbe Code Eingeben" value="2" /> </p> <p> <label>Komponent der grunen Farbe</label> <input type="number" onchange="calculateColor()" id="input_element_2" min="0" max="9" placeholder="Farbe Code Eingeben" value="3" /> </p> <p> <label>Komponent der blauen Farbe</label> <input type="number" onchange="calculateColor()" id="input_element_3" min="0" max="9" placeholder="Farbe Code Eingeben" value="4" /> </p> </form>