个人中心
gpt4 book ai didi

javascript - 回文检查器问题

转载 作者：行者123 更新时间：2023-11-27 23:41:43 31 4
gpt4 key购买 nike

我的回文检查器不再输入以下方法 lengthChecker()，并且不再考虑每当一个单词不是回文时，就不会出现一条警告消息说它不是回文。可能是什么问题？我还希望它在警报消息上显示用户的输入，而不是 [object HTMLInputElement]。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Lesson #6 Homework</title>
    <script type="text/javascript" src="./js/palindrome.js"></script>
</head>

<body>
    <h1>Is it a Palindrome?</h1>
    <div id="mainCont">
        <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
        <p>Word:
            <input type="text" id="str" name="string" />
            <button id="checkInput">Submit</button>
        </p>
    </div>
</body>

</html>

这是目前的 JS:

function lengthChecker() {
    var str = document.getElementById("str").value;
    if (str.length > 10) {
        alert("Sorry. Your input surpasses the 10 characters maximum. Please try again.")
        return false;
    } else if (str.length == 0) {
        alert("Sorry. Your input is too short, and doesn't meet the 10 characters maximum. Please try again.")
        return false;
    }
    palindrome();
}

function palindrome() {
    var revStr = "";
    var str = document.getElementById("str").value;
    var i = str.length;
    for (var j = i; j >= 0; j--) {
        revStr = revStr + str.charAt(j);
    }
    if (str == revStr) {
        isPalindrome();
    } else {
        notPalindrome();
    }
}

function isPalindrome() {
    alert(str + " is a Palindrome.");
}

function notPalindrome() {
    alert(str + " isn't a Palindrome.");
}

document.addEventListener("DOMContentLoaded", function (e) {
    var el = document.getElementById("checkInput");
    el.addEventListener("click", isPalindrome);
});

最佳答案

不要使代码过于复杂。正如流行的一句话所说，保持简单

function isPalindrome(str) {
    var backwards = str.split('').reverse().join('');
    return str === backwards;
}

// commented next line for snippet
// document.addEventListener("DOMContentLoaded", function (e) {
    document.getElementById("checkInput").addEventListener(
        "click",
        function (e) {
            var str = document.getElementById("str").value;
            if (str.length > 10) return alert('Too long, max length is 10');
            if (str.length <  1) return alert('Too short, min length is 1');
            if (isPalindrome(str)) return alert('Is a palindrome');
            alert('Not a palindrome');
        }
    );
// commented next line for snippet
// });


// alert -> console.log for snippet
function alert() {
    console.log.apply(console, arguments);
}
<h1>Is it a Palindrome?</h1>
<div id="mainCont">
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
    <p>Word:
        <input type="text" id="str" name="string" />
        <button id="checkInput">Submit</button>
    </p>
</div>

<小时/>

sadly reverse method isn't allowed. and i have to use a callback function

function reverse(str) {
    var s = '', i = str.length;
    while (i-- > 0) s += str.charAt(i);
    return s;
}

function isPalindrome(str, callback_yes, callback_no) {
    if (str === reverse(str)) {
        callback_yes(str);
    } else {
        callback_no(str);
    }
}

var yes = alert.bind(null, 'Yay'),
    no  = alert.bind(null, 'Nay');

// commented next line for snippet
// document.addEventListener("DOMContentLoaded", function (e) {
    document.getElementById("checkInput").addEventListener(
        "click",
        function (e) {
            var str = document.getElementById("str").value;
            if (str.length > 10) return alert('Too long, max length is 10');
            if (str.length <  1) return alert('Too short, min length is 1');
            isPalindrome(str, yes, no);
        }
    );
// commented next line for snippet
// });


// alert -> console.log for snippet
function alert() {
    console.log.apply(console, arguments);
}
<h1>Is it a Palindrome?</h1>
<div id="mainCont">
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
    <p>Word:
        <input type="text" id="str" name="string" />
        <button id="checkInput">Submit</button>
    </p>
</div>

关于javascript - 回文检查器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33602318/

31 4 0
文章推荐： css - Angular 徽章 - 随着长度的增加改变形状
文章推荐： html - zurb 基础 block 网格和均衡器
文章推荐： javascript - select2 通过 jquery 或 js 从下拉列表中触发一个元素
文章推荐： html - 如何关闭自动播放