lehrkraefte:blc:informatik:ffprg1-2021:js:html-manip [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== HTML-Manipulation ======
Typischerweise werden die von JavaScript manipulierten HTML-Element mit einer ID versehen und darüber angesprochen.

Im HTML:
<code html>
<div id="humpfdidumpf">Bla bla</div>
</code>

In JavaScript:
<code javascript>
let res = "";
for (let i=1; i<21; i++) {
  res+=`<p>${i}&${i}=${i*i}`;
}
// Resultat auf HTML-Seite ausgeben.
document.getElementById("humpfdidumpf").innerHTML = res;
</code>
Mehr zu [[https://www.w3schools.com/jsref/met_document_getelementbyid.asp|document.getElementById()]].

Es gibt weitere Methoden, Elemente auf einer Seite ausfindig zu machen, die aber für unsere Zwecke wohl noch nicht wichtig sind. 
  * [[https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp|getElementsByClassName()]] (gibt ein Array zurück, möglicherweise leer)
  * [[https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp|getElementsByTagName()]] (gibt ein Array zurück, möglicherweise leer)
  * [[https://www.w3schools.com/jsref/met_document_queryselector.asp|querySelector()]] und [[https://www.w3schools.com/jsref/met_document_queryselectorall.asp|querySelectorAll()]]

<WRAP todo>
Programmieren Sie ein Seite, die anzeigt, wie oft ein Knopf gedrückt wurde.
</WRAP>

<WRAP todo>
Programmieren Sie eine Seite, die zwei Knöpfe hat, womit sich die Hintergrundfarbe der Seite ändern lässt.

Hier erfahren Sie, wie der Stil eines HTML-Elements dynamisch geändert werden kann: https://www.w3schools.com/jsref/prop_html_style.asp
</WRAP>