Event Listener

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>

Hier klicken zum Herunterladen