In: Computer Science
Palindrome Javascript - NUMBERS
I am trying to write this javascript function to check if a number is Palindrome..
Palindrome means - a word, phrase, or sequence that reads the same backward as forward, e.g., 12321
This is the code i have, but it doesnt work.
PLEASE MAKE SURE IT WORK BEFORE POST ANSWER, I GOT @ CODE THAT DID WORK BEFORE
HTML
JavaScript Palindrome Exercise
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
/>
Palindrome
Enter a positive number:
Is this a palindrome?
No
.JS
// Enter your code here
let convertButton = document.getElementsByClassName("btn")[0];
let userInput = document.getElementById("number").value;
let results = document.getElementById("result").value;
convertButton.addEventListener("click", function (event) {
event.preventDefault();
console.log(userInput);
if (validatePalidrome(userInput))
document.getElementById("result").innerHTML = "true";
else document.getElementById("result").innerHTML = "false";
});
function validatePalidrome(numbers) {
let userStringArray = userInput.split("");
let reverseUserInput = userStringArray.reverse();
let joinReverseString = reverseUserInput.join("");
if (userInput.localeCompare(joinReverseString) === 0) {
return true;
}
return false;
}
Note: Done accordingly. Please comment for any problem. Please Uprate. Thanks
Problems identified:
// Enter your code here
let convertButton = document.getElementsByClassName("btn")[0];
let userInput = document.getElementById("number").value; DONT KEEP THAT BEFORE FUNCTION CALL
let results = document.getElementById("result").value; AS IT WILL NO TAKE VALUES, IT IS LOADED WITH PAGE
convertButton.addEventListener("click", function (event) {
event.preventDefault();
console.log(userInput);
if (validatePalidrome(userInput))
document.getElementById("result").innerHTML = "true";
else document.getElementById("result").innerHTML = "false";
});
function validatePalidrome(numbers) {
let userStringArray = userInput.split(""); YOU SHOULD HAVE USED numbers not userInput as your parameter is numbers
let reverseUserInput = userStringArray.reverse();
let joinReverseString = reverseUserInput.join("");
if (userInput.localeCompare(joinReverseString) === 0) { YOU SHOULD HAVE USED numbers not userInput as your parameter is numbers
return true;
}
return false;
}
Solution:
Html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Palindrome</h2>
<div class="form-group">
<label for="number">Enter a positive
number:</label>
<input type="text" class="form-control" id="number">
</div>
<button type="button" class="btn">Check</button>
<div class="form-group">
Is this a palindrome?
<p id="result"></p>
</div>
</div>
</body>
<script src="palin.js">
</script>
</html>
Javascript file (palin.js):
let convertButton =
document.getElementsByClassName("btn")[0];
convertButton.addEventListener("click", function (event) {
event.preventDefault();
let userInput =
document.getElementById("number").value;
let results = document.getElementById("result").value;
console.log(userInput);
if (validatePalidrome(userInput))
document.getElementById("result").innerHTML = "true";
else document.getElementById("result").innerHTML = "false";
});
function validatePalidrome(numbers) {
let userStringArray = numbers.split("");
let reverseUserInput = userStringArray.reverse();
let joinReverseString = reverseUserInput.join("");
if (numbers.localeCompare(joinReverseString) === 0) {
return true;
}
return false;
}
Output: