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> </li>
<li>
<button
type="submit"
name="submit"
value="Submit"
onclick="allLetter(document.form1.text1); nextLetter(document.form1.text2)"
>
submit
</button>
</li>
<li> </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.