diff --git a/app_7/color.html b/app_7/color.html
index aac3697a0249b07395cc73bcd0154fa2ef4f7f2f..7f783e6d14499622de8c21d484077b508768a8e8 100644
--- a/app_7/color.html
+++ b/app_7/color.html
@@ -6,8 +6,7 @@
<title>Color test</title>
<script>
- document.addEventListener('DOMContentLoaded', function() {
-
+ /*
// change the font color to red
document.querySelector('#red').onclick = function() {
document.querySelector('#hello').style.color = 'red';
@@ -22,6 +21,15 @@
document.querySelector('#green').onclick = function() {
document.querySelector('#hello').style.color = 'green';
};
+ */
+ document.addEventListener('DOMContentLoaded', function() {
+
+ document.querySelectorAll('.color-change').forEach(function(button) {
+ button.onclick = function() {
+ alert(button.dataset.color)
+ document.querySelector('#hello').style.color = button.dataset.color;
+ };
+ });
});
</script>
@@ -29,9 +37,9 @@
<body>
<h1 id='hello'>Hello</h1>
- <button id='red'>Red</button>
- <button id='blue'>Blue</button>
- <button id='green'>Green</button>
+ <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>