small tweaks to reduce code duplication

Bobby Jack · Bobby Jack · commit f5d69e58245e · 2023-08-31T12:29:08.000+01:00
diff --git a/script.js b/script.js
@@ -11,6 +11,8 @@ let submitButton = document.getElementById('submitButton');
 let output = document.getElementById('output');
 let refreshButton = document.getElementById('refreshButton');
 
+var captchaStr = "";
+
 
 // alphaNums contains the characters with which you want to create the CAPTCHA
 let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 
@@ -23,54 +25,49 @@ let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G',
                 'x', 'y', 'z', '0', '1', '2', '3', 
                 '4', '5', '6', '7', '8', '9'];
 
+function generate_captcha() {
+    // This loop generates a random string of 7 characters using alphaNums
+    // Further this string is displayed as a CAPTCHA
+    let emptyArr = [];
+
+    for (let i = 1; i <= 7; i++) {
+        emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
+    }
+
+    captchaStr = emptyArr.join('');
+
+    ctx.clearRect(0, 0, captchaText.width, captchaText.height);
+    ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
 
-// This loop generates a random string of 7 characters using alphaNums
-// Further this string is displayed as a CAPTCHA
-let emptyArr = [];
-for (let i = 1; i <= 7; i++) {
-    emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
+    output.innerHTML = "";
+}
+
+generate_captcha();
+
+function check_captcha() {
+    if (userText.value === captchaStr) {
+        output.className='correctCaptcha';
+        output.innerHTML = "Correct!";
+    } else {
+        output.className='incorrectCaptcha';
+        output.innerHTML = "Incorrect, please try again!";
+    }
 }
-var c = emptyArr.join('');
-ctx.fillText(emptyArr.join(''), captchaText.width/4, captchaText.height/2);
 
 // This event listener is stimulated whenever the user press the "Enter" button
 // "Correct!" or "Incorrect, please try again!" message is
 // displayed after validating the input text with CAPTCHA
 userText.addEventListener('keyup', function(e) {
     if (e.key === 'Enter') {
-        if (userText.value === c) {
-            output.classList.add("correctCaptcha");
-            output.innerHTML = "Correct!";
-        } else {
-            output.classList.add("incorrectCaptcha");
-            output.innerHTML = "Incorrect, please try again!";
-        }
+        check_captcha();
     }
 });
 
 // This event listener is stimulated whenever the user clicks the "Submit" button
 // "Correct!" or "Incorrect, please try again!" message is
 // displayed after validating the input text with CAPTCHA
-submitButton.addEventListener('click', function() {
-    if (userText.value === c) {
-        output.classList.add("correctCaptcha");
-        output.innerHTML = "Correct!";
-    } else {
-        output.classList.add("incorrectCaptcha");
-        output.innerHTML = "Incorrect, please try again!";
-    }
-});
+submitButton.addEventListener('click', check_captcha);
 
 // This event listener is stimulated whenever the user press the "Refresh" button
 // A new random CAPTCHA is generated and displayed after the user clicks the "Refresh" button
-refreshButton.addEventListener('click', function() {
-    userText.value = "";
-    let refreshArr = [];
-    for (let j = 1; j <= 7; j++) {
-        refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
-    }
-    ctx.clearRect(0, 0, captchaText.width, captchaText.height);
-    c = refreshArr.join('');
-    ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
-    output.innerHTML = "";
-});
+refreshButton.addEventListener('click', generate_captcha);
