From 9355f54ceeb447d45c28187df475d86cdcfa7378 Mon Sep 17 00:00:00 2001
From: Evelina Berg <evelina.berg@outlook.com>
Date: Fri, 5 Jul 2024 19:02:13 +0200
Subject: [PATCH] Add eventlistener to form element

---
 .../tutorial/applying_styles_and_colors/index.md    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 508f7725ad0a3cf..0e3b7c9f5a0b734 100644
--- a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -392,7 +392,7 @@ function draw() {
   ctx.lineWidth = 10;
 
   // check input
-  if (document.getElementById("miterLimit").value.match(/\d+(\.\d+)?/)) {
+  if (document.getElementById("miterLimit").checkValidity()) {
     ctx.miterLimit = parseFloat(document.getElementById("miterLimit").value);
   }
 
@@ -417,11 +417,9 @@ function draw() {
     <td>
       Change the <code>miterLimit</code> by entering a new value below and
       clicking the redraw button.<br /><br />
-      <form onsubmit="return draw();">
-        <label for="miterLimit">Miter limit</label>
-        <input type="number" size="3" min="1" id="miterLimit" />
-        <input type="submit" value="Redraw" />
-      </form>
+      <label for="miterLimit">Miter limit</label>
+      <input type="number" id="miterLimit" size="3" min="1" />
+      <input type="submit" id="redraw" value="Redraw" />
     </td>
   </tr>
 </table>
@@ -432,6 +430,9 @@ document.getElementById("miterLimit").value = document
   .getElementById("canvas")
   .getContext("2d").miterLimit;
 draw();
+
+const redraw = document.getElementById("redraw");
+redraw.addEventListener("click", draw);
 ```
 
 {{EmbedLiveSample("A_demo_of_the_miterLimit_property", "", "180")}}