From a75fa50daf75a6c27503e0c9fb549c850936f73b Mon Sep 17 00:00:00 2001
From: Minhao Qiu <minhao.qiu@fau.de>
Date: Wed, 17 Jul 2019 20:24:10 +0200
Subject: [PATCH] udpate
---
app_7/color2.html | 25 +++++++++++++++++++++++++
app_7/color3.html | 27 +++++++++++++++++++++++++++
2 files changed, 52 insertions(+)
create mode 100644 app_7/color2.html
create mode 100644 app_7/color3.html
diff --git a/app_7/color2.html b/app_7/color2.html
new file mode 100644
index 0000000..1aa9781
--- /dev/null
+++ b/app_7/color2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Color test</title>
+ <script>
+ // use arrow funtion
+ document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('.color-change').forEach(button => {
+ button.onclick = () => {
+ alert(button.dataset.color)
+ document.querySelector('#hello').style.color = button.dataset.color
+ }
+ })
+ })
+
+ </script>
+</head>
+<body>
+ <h1 id="hello">Hello</h1>
+ <button class="color-change" data-color="red">Red</button>
+ <button class="color-change" data-color="blue">Blue</button>
+ <button class="color-change" data-color="green">Green</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/app_7/color3.html b/app_7/color3.html
new file mode 100644
index 0000000..df084c2
--- /dev/null
+++ b/app_7/color3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Color test3</title>
+
+ <script>
+ document.addEventListener('DOMContentLoaded', () => {
+ document.querySelector('#color-change').onchange = function() {
+ alert(this.value)
+ document.querySelector("#hello").style.color = this.value;
+ }
+ });
+
+ </script>
+</head>
+<body>
+ <h1 id="hello">Hello</h1>
+ <select id="color-change">
+ <option value="black">Black</option>
+ <option value="red">Red</option>
+ <option value="blue">Blue</option>
+ <option value="green">Green</option>
+
+ </select>
+</body>
+</html>
\ No newline at end of file
--
GitLab