Update index.html

Andrei Pfeiffer · GitHub
1 parent e95e88fd
Showing 1 changed file with 7 additions and 4 deletions Show diff stats
docs/index.html
@@ -31,8 +31,9 @@
  
   <form action="#">
     <p>
-      <label>
-        <input type="checkbox" id="toggle-multiple" /> multiple files
+      <label id="toggle-multiple">
+        <input type="checkbox" />
+        <span>multiple files</span>
       </label>
     </p>
     <p>
@@ -69,14 +70,16 @@
   </form>
  
   <script>
-    const $toggleMultiple = document.getElementById("toggle-multiple");
-    $toggleMultiple.addEventListener("change", event => {
+    const toggleMultiple = document.getElementById("toggle-multiple");
+    const toggleMultipleText = toggleMultiple.querySelector("span").textContent;
+    toggleMultiple.querySelector("input").addEventListener("change", event => {
       document.querySelectorAll("input[type='file']").forEach(input => {
         if (event.target.checked) {
           input.setAttribute("multiple", true);
         } else {
           input.removeAttribute("multiple");
         }
+        toggleMultiple.querySelector("span").textContent = `${toggleMultipleText} (${event.target.checked.toString()})`;
       });
     })
   </script>
...	...	@@ -31,8 +31,9 @@
31	31
32	32	<form action="#">
33	33	<p>
34		- <label>
35		- <input type="checkbox" id="toggle-multiple" /> multiple files
	34	+ <label id="toggle-multiple">
	35	+ <input type="checkbox" />
	36	+ <span>multiple files</span>
36	37	</label>
37	38	</p>
38	39	<p>
...	...	@@ -69,14 +70,16 @@
69	70	</form>
70	71
71	72	<script>
72		- const $toggleMultiple = document.getElementById("toggle-multiple");
73		- $toggleMultiple.addEventListener("change", event => {
	73	+ const toggleMultiple = document.getElementById("toggle-multiple");
	74	+ const toggleMultipleText = toggleMultiple.querySelector("span").textContent;
	75	+ toggleMultiple.querySelector("input").addEventListener("change", event => {
74	76	document.querySelectorAll("input[type='file']").forEach(input => {
75	77	if (event.target.checked) {
76	78	input.setAttribute("multiple", true);
77	79	} else {
78	80	input.removeAttribute("multiple");
79	81	}
	82	+ toggleMultiple.querySelector("span").textContent = `${toggleMultipleText} (${event.target.checked.toString()})`;
80	83	});
81	84	})
82	85	</script>
...	...