diff --git a/app_7/color2.html b/app_7/color2.html new file mode 100644 index 0000000000000000000000000000000000000000..1aa9781349e9b52d9ec2348a113ed3d536fd5be0 --- /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 0000000000000000000000000000000000000000..df084c21a8bc2a97a8b6cbd3cfd6499b1eea28b4 --- /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