Here is my HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Palindrome Checker</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../public/css/palindromes.css" />
<script type="text/javascript" src="./palindromeCheck.js"></script>
</head>
<body>
<header>
<a href="./index.html"><img src="../public/images/Palindrome.png" alt="logo" width="350" /></a>
<h3> Palindrome Checker: </h3>
</header>
<form name="textarea" id="form3" autocomplete="off" method="get">
<fieldset>
<legend class="legend">What phrase do you want to check: </legend>
<label class="labelitem">Input phrase:</label>
<input type="text" name="input" id="input" size="40" maxlength="40"
placeholder="Your Phrase Here" required pattern="[a-zA-Z][a-zA-Z'\- ]*"
title="Just Input the Phrase" />
<button type="submit" id="submit" class="btn btn-default">Submit</button>
<br />
<script>
document.addEventListener("submit", palindrome(document.getElementById("input"));
</script>
</fieldset><br/>
<fieldset>
<legend class="legend">History: </legend>
<ul id="history">
<li class="is_palindrome">aba</li>
<li class="not-palindrome">abc</li>
<li class="not-palindrome">aeraa</li>
</ul>
</fieldset>
</form>
<br />
<br />
<footer id="footnote">
Weizhe Dou
<br />
ID:10400406
<br />
copyright reserved
</footer>
</body>
</html>
Here is my .js file:
let exportedMethods = {
isPalindrome(txt) {
var isP = true;
if(txt.length() == 1){
return true;
}
for(i = 0; i < (txt.length())/2; i++){
if(txt[i] != txt[txt.length()-1-i]){
isP = false;
}
}
return isP;
},
palindrome(txt) {
var list = getElementById('history');
var li = createElement("li");
var str = txt.trim();
li.appendChild(str);
var isPalindrome = isPalindrome(str);
if(str.length()){
if (isPalindrome) {
li.class = 'is-palindrome'
}
else{
li.class = 'not-palindrome'
}
}
list.appendChild(li);
}
}
module.exports = exportedMethods;
I am trying to call palindrome() function in my HTML once the user clicks the submit button. However, the page is not acting as what I thought it would do. I don't know which part of the code I have messed up with. When I click the submit button, nothing new shows up at my History part which it should be if my javascript is correct. Any advice how should I fix this?
Module loading won't work in browsers yet.
Of course, this should be all done unobtrusively, and without using global objects, but as a starting point, use this corrected version of your code to make it work:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Palindrome Checker</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../public/css/palindromes.css" />
<script type="text/javascript" src="./palindromeCheck.js"></script>
</head>
<body>
<header>
<a href="./index.html"><img src="../public/images/Palindrome.png" alt="logo" width="350" /></a>
<h3> Palindrome Checker: </h3>
</header>
<form name="textarea" id="form3" autocomplete="off" method="get">
<fieldset>
<legend class="legend">What phrase do you want to check: </legend>
<label class="labelitem">Input phrase:</label>
<input type="text" name="input" id="input" size="40" maxlength="40"
placeholder="Your Phrase Here" required pattern="[a-zA-Z][a-zA-Z'\- ]*"
title="Just Input the Phrase" />
<button type="submit" id="submit" class="btn btn-default">Submit</button>
<br />
<script>
document.addEventListener("submit", function (e) { palindrome(document.getElementById("input")); e.preventDefault(); });
</script>
</fieldset><br/>
<fieldset>
<legend class="legend">History: </legend>
<ul id="history">
<li class="is_palindrome">aba</li>
<li class="not-palindrome">abc</li>
<li class="not-palindrome">aeraa</li>
</ul>
</fieldset>
</form>
<br />
<br />
<footer id="footnote">
Weizhe Dou
<br />
ID:10400406
<br />
copyright reserved
</footer>
</body>
</html>
JS
function isPalindrome(txt) {
var isP = true;
if(txt.length == 1){
return true;
}
for(i = 0; i < txt.length/2; i++){
if(txt[i] != txt[txt.length-1-i]){
isP = false;
}
}
return isP;
};
function palindrome(txt) {
var list = document.getElementById('history');
var li = document.createElement("li");
var str = txt.value;
li.innerText = str;
if(str.length){
if (isPalindrome(str)) {
li.className = 'is-palindrome'
}
else{
li.className = 'not-palindrome'
}
}
list.appendChild(li);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.