输出rsults到div #results

Question

所以我建立了一个回文程序，我正在摸索为什么结果不会打印到选定的div。

这是JS

    function palindrome(str) {
    var re = /[W_]/g; 
    var lowStr = str.toLowerCase().replace(re,'');
    var splitStr = lowStr.split('').reverse.join('');  
    var results = document.getElementById('results');
    if(splitStr === lowStr) {
      results.innerHTML ='This IS a palindrome';
    } else {
      results.innerHTML ='This is NOT a palindrome';
     }
   }
 palindrome();

Answer 1

当函数palindrome()期望字符串作为参数时，不带任何参数调用它。在这种情况下，undefined将被传递。

所以，这应该导致错误

  

无法阅读toLowerCase()的{​​{1}}。

您正在使用的正则表达式不正确。

undefined将匹配所有/[W_]/g和W任意数量的次数。

您需要_，它将匹配任何非字母数字字符。

\W

还有一件事是应该通过添加var regex = /[\W_]/g; 来调用函数reverse。

()

代码中存在许多逻辑错误。此处updated fiddle。

＆＃13;

＆＃13;

var splitStr = lowStr.split('').reverse().join('');
                                       ^^            // Call

＆＃13;

function palindrome(event) { // sets function
	event.preventDefault();
    
    var str = document.getElementById('input').value;
    // regEx removes all non-alpha numeric characters

    var re = /[\W_]/g;
    // converts string to lower case and applies regex
    var lowStr = str.toLowerCase().replace(re, '');
    // convert string characters into array, reverses and joins output back in into string
    var splitStr = lowStr.split('').reverse().join('');
    // conditional statement to check if input is a palindrome

    var results = document.getElementById('results');
    if (splitStr === lowStr) {
        results.innerHTML = 'This IS a palindrome';
    } else {
        results.innerHTML = 'This is NOT a palindrome';
    }

    return false;
}

＆＃13;

@import "https://fonts.googleapis.com/css?family=Libre+Franklin:400,700";
* {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background: #222;
    background: #222;
    font: 62.5% / 1.6 'Libre Franklin', sans-serif;
}

.wrapper {
    max-width: 960px;
    height: 100%;
    background-color: #69b4f1;
    background-image: -webkit-linear-gradient(#69b4f1, #1277c8);
    background-image: linear-gradient(#69b4f1, #1277c8);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    padding: 5em 2em;
    margin: 0 auto;
}

.title-block {
    text-align: center;
    margin-bottom: 2em;
}

.title-block h1 {
    font-size: 6vmin;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(34, 34, 34, 0.5);
}

.title-block h3 {
    max-width: 100%;
    font-size: 3vmin;
    font-weight: 400;
    text-align: justify;
}

.title-block h3 span {
    font-weight: 700;
    color: #fff;
    font-size: 105%;
    @inlcude ts;
}

form {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    -o-align-items: stretch;
    align-items: stretch;
    -ms-flex-align: stretch;
}

form input,
form button {
    padding: 10px;
    border: 0;
    box-shadow: 4px 4px 4px rgba(34, 34, 34, 0.4);
    font-size: 3vmin;
}

form input {
    border-radius: 10px 0 0 10px;
    -webkit-flex-grow: 4;
    -moz-flex-grow: 4;
    -webkit-box-flex: 4;
    flex-grow: 4;
    -ms-flex-positive: 4;
}

form button {
    border-radius: 0 10px 10px 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-positive: 1;
    background: #f1a669;
    background: #f1a669;
}

form button:focus,
form button:active,
form button:hover {
    background: #ed8a3a;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

#results {
    margin-top: 50px;
    width: 100%;
    height: 200px;
    border: 1px dashed red;
}

＆＃13;

＆＃13;

＆＃13;