code from 20-5-26

2026-05-20 13:43:13 +02:00
parent 810a541924
commit 44623ba94e
2 changed files with 54 additions and 0 deletions
--- a/Jahr/javascript/htmlformular/htmlformular.html
+++ b/Jahr/javascript/htmlformular/htmlformular.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Document</title>
+</head>
+<body>
+    <form>
+        <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name">
+        </div>
+
+        <div>
+            <label for="adresse">adresse:</label>
+            <input type="text" id="adresse" name="adresse" oninput="laenge()">
+            <p id="platzhalter"></p>
+        </div>
+    </form>
+    <script src="htmlformular_files/script.js"></script>
+
+</body></html>
--- a/Jahr/javascript/htmlformular/htmlformular_files/script.js
+++ b/Jahr/javascript/htmlformular/htmlformular_files/script.js
@@ -0,0 +1,30 @@
+const x =5;//const ist eine permanente Variable die nicht verändert werden kann
+let y = 4;//mit let definieren wir Variablen die noch verändert werden können
+
+//alert wird jedesmal ausgegeben wenn javascript geladen wurde
+alert("JAVASCRIPT FUNKTIONIERT");
+
+
+const feld1 = document.getElementById("name");
+feld1.addEventListener("input", function(){
+    if(feld1.value.length > 4){
+        feld1.style.backgroundColor="green";
+    }
+    else{
+        feld1.style.backgroundColor="red";
+    }
+
+})
+
+function laenge(){
+   const feld2 = document.getElementById("adresse");
+//   feld2.innerHTML="not long enaugh";
+    feld2.addEventListener("input", function(){
+    if(feld2.value.length > 4){
+        feld2.style.backgroundColor="green";
+    }
+    else{
+        feld2.style.backgroundColor="red";
+    } 
+}
+)}