0

I'm new to javascript and I can't seem to overcome an issue that I am facing. I have created a form that collects two names onclick. It then validates whether those names contain alphabetic characters or not. It is then supposed to run it through another function that then matches those names together but that doesn't happen.

var name1 = document.getElementById("textty").value;
var name2 = document.getElementById("wall").value;

function allLetter(inputtxt) {
    let letters = /^[A-Za-z]+$/;
    if (inputtxt.value.match(letters)) {
        var z = document.getElementById("textty").value;
        console.log(z);
        return true;
    } else {
        alert("Please input alphabetic characters only");
        return false;
    }
}

function nextLetter(inputtxt) {
    let letters = /^[A-Za-z]+$/;
    if (inputtxt.value.match(letters)) {
        var y = document.getElementById("wall").value;
        console.log(y);
        return true;
    } else {
        alert("Please input alphabetic characters only");
        return false;
    }
}

function output() {
    const string = name1 + " matches " + name2;

    const usingSplit = string.toLowerCase().replace(/\s/g, "").split("");

    const counts = {};

    usingSplit.forEach(function (x) {
        counts[x] = (counts[x] || 0) + 1;
    });

    const display = Object.values(counts);
    let num = +display.join("");

    function sum(num) {
        let numString = num.toString();
        let newString = "";
        while (numString.length > 1) {
            newString += (
                parseInt(numString[0]) +
                parseInt(numString[numString.length - 1])
            ).toString();
            numString = numString.substring(1, numString.length - 1);
        }
        newString += numString;

        if (newString.length > 2) {
            return sum(newString);
        } else {
            return newString;
        }
    }

    if (sum(num) >= 80) {
        console.log(
            name1 + " matches " + name2 + " " + sum(num) + "%" + ", good match"
        );
    } else {
        console.log(name1 + " matches " + name2 + " " + sum(num) + "%");
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>JavaScript Goodmatches</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body>
        <div class="mail">
            <h2>Enter The Two Names and Submit</h2>
            <form name="form1" action="#">
                <ul>
                    <li>Code:</li>
                    <li><input id="textty" type="text" name="text1" /></li>
                    <li><input id="wall" type="text" name="text2" /></li>
                    <li class="rq">*Enter alphabetic characters only.</li>
                    <li>&nbsp;</li>
                    <li>
                        <button
                            type="submit"
                            name="submit"
                            value="Submit"
                            onclick="allLetter(document.form1.text1); nextLetter(document.form1.text2)"
                        >
                            submit
                        </button>
                    </li>
                    <li>&nbsp;</li>
                </ul>
            </form>
        </div>
        <script src="main.js"></script>
    </body>
</html>

I feel that my main issue stems from my javascript but I can't seem to find the problem.

ikhvjs
  • 5,316
  • 2
  • 13
  • 36
  • You may try to add code to code snippet next time, so that people can run your code to debug more easily. I already do it for you. – ikhvjs Dec 10 '21 at 11:14
  • 1
    Submitting a form resets the whole page, including all JS. – connexo Dec 10 '21 at 11:32
  • 1
    Does this answer your question? [Intercept a form submit in JavaScript and prevent normal submission](https://stackoverflow.com/questions/5384712/intercept-a-form-submit-in-javascript-and-prevent-normal-submission) – Peter Krebs Dec 10 '21 at 12:50

0 Answers0