Hello,
I get all the desired results in my browser to pass the tests. I have the requested html elements with the requested ‘id’ values. None of the Javascript passes, even though I update the inner HTML of the ‘results’ element (a div element by request) with the exact value that is requested. The preview will even print the exact verbiage for the alert when empty input is attempted to be passed, but that test fails too. Can anyone advise? I will move on for now because this doesn’t seem like a great use of time given I’ve figured out the functionality and seen it work in my own browser (even in the preview browser as well).
Warning: spoilers below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
</head>
<body>
<form id="form">
<label>Test field:
<input id='text-input' type="text" required
oninvalid="this.setCustomValidity('Please input a value')"
/>
</label>
<br /><br />
<button id="check-btn">Submit form</button>
</form>
<div id="result">
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
// VARIABLES
const form = document.getElementById("form");
const textInput = document.getElementById('text-input')
const result = document.getElementById("result");
// FUNCTIONS
function cleanString(input) {
return input.replace(/[ \/\\_.|&;$%@"<>()+,-]/g, "").toLowerCase();
}
function checkSingleLetter(input) {
return input.length === 1;
}
function checkMultiLetter(input) {
if (input.length < 2) {
return false;
}
let reversedStringArray = [];
stringArray = input.split('');
stringArray.forEach(element => {
reversedStringArray.unshift(element);
});
console.log(reversedStringArray.join())
return stringArray.join('') === reversedStringArray.join('');
}
function logSubmit(event) {
let clnString = cleanString(textInput.value);
console.log(clnString);
console.log(checkSingleLetter(clnString));
console.log(checkMultiLetter(clnString));
if (checkSingleLetter(clnString)) {
result.innerHTML = `${textInput.value} is a palindrome`;
}
if (checkMultiLetter(clnString)) {
result.innerHTML = `${textInput.value} is a palindrome`;
} else {
result.innerHTML =`${textInput.value} is not a palindrome`;
}
event.preventDefault();
}
form.addEventListener("submit", logSubmit);
