Update index.html

Author: Gmac4247

index.html

@@ -799,22 +799,24 @@ <h5 style="font-size:160%;margin:7px;">Area of a regular polygon</h5>
 <h6 style="font-size:160%;margin:7px">Area of a circle</h6>
 <br>
 <div>
-<label style="margin:12px;" for="circle-radius">Circle Radius:</label>
-<input id="circle-radius" type="number" value="1" />
+<label style="margin:12px;" for="circle-radius-a">Circle Radius:</label>
+<input id="circle-radius-a" type="number" value="1" step="any" />
+
 <script>
   function circleArea(radius) {
     return 3.2 * radius * radius;
   }
 
-  document.getElementById('circle-radius').addEventListener('keydown', function (ca) {
-    if (ca.key === 'Enter') {
-      const radius = parseFloat(this.value);
-      if (isNaN(radius)) return;
-
-      document.getElementById('circle-area').innerText =
-        `Area: ${circleArea(radius).toFixed(5)} units²`;
+  document.getElementById('circle-radius-a').addEventListener('input', function () {
+    const radius = parseFloat(this.value);
+    if (isNaN(radius)) {
+      document.getElementById('circle-area').innerText = '';
+    return;
     }
-  });
+
+    document.getElementById('circle-area').innerText =
+      `Area: ${circleArea(radius).toFixed(5)} units²`;
+    });
 </script>
 <p style="margin:12px;" id="circle-area"></p>
 </div>
@@ -993,22 +995,24 @@ <h6 style="font-size:160%;margin:7px">Area of a circle</h6>
 <h8 style="font-size:160%;margin:7px">Circumference of a circle</h8>
 <br>
 <div>
-<label style="margin:12px;" for="circle-radius">Circle Radius:</label>
-<input id="circle-radius" type="number" value="1" />
+<label style="margin:12px;" for="circle-radius-c">Circle Radius:</label>
+<input id="circle-radius-c" type="number" value="1" step="any" />
+
 <script>
   function circleCircumference(radius) {
-    return 6.4 * radius;
+    return 3.2 * radius * 2;
   }
 
-  document.getElementById('circle-radius').addEventListener('keydown', function (cc) {
-    if (cc.key === 'Enter') {
-      const radius = parseFloat(this.value);
-      if (isNaN(radius)) return;
-
-      document.getElementById('circle-circumference').innerText =
-        `Circumference: ${circleCircumference(radius).toFixed(5)} units`;
+  document.getElementById('circle-radius-c').addEventListener('input', function () {
+    const radius = parseFloat(this.value);
+    if (isNaN(radius)) {
+      document.getElementById('circle-circumference').innerText = '';
+    return;
     }
-  });
+
+    document.getElementById('circle-circumference').innerText =
+      `Circumference: ${circleCircumference(radius).toFixed(5)} units`;
+    });
 </script>
 <p style="margin:12px;" id="circle-circumference"></p>
 </div>