创建回文html页面,功能无法正常运行

时间:2018-12-03 01:34:57

标签: javascript html

我刚接触JavaScript。我正在创建一个接受输入的html页面,并检查该输入是否是回文。我创建了两个函数,一个函数反转字符串,另一个函数验证其回文率。我不确定自己在做什么错。我已经尝试过使用控制台进行调试,但到目前为止还没有。

这是我拥有的代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Text Validation</title>
    <script>

      function reverseString(str) {
          return str.toString().split("").reverse().join("");
      }

      function Validation() {
          firstStr = document.getElementById('user')
          secondStr = reverseString(firstStr)
          if (firstStr == secondStr) {
              alert("passed palindrome");
          }
          else {
              alert("failed palindrome");

          }
      }

    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <b> Enter a random word </b>
        </td>
        <td>
          <input type="textbox" id="user">
        </td>
      </tr>
      <td align = "right" colspan = "2">
        <input  type="button"  id="btnSubmit" value="Submit" onClick =
                "Validation();">
      </td>
    </table>
  </body>
</html>

2 个答案:

答案 0 :(得分:1)

您需要使用document.getElementById('user').value

获取值

function reverseString(str) {
  return str.toString().split("").reverse().join("");
}

function Validation() {
firstStr = document.getElementById('user').value
secondStr = reverseString(firstStr)

if (firstStr == secondStr) {
    alert("passed palindrome");
}
else {
    alert("failed palindrome");

   }
}
<table>
<tr>
 <td>
  <b> Enter a random word </b>
</td>
<td>
  <input type="textbox" id="user">
</td>
</tr>
<td align = "right" colspan = "2">
  <input  type="button"  id="btnSubmit" value="Submit" onClick = 
   "Validation();">
</td>
</table>

答案 1 :(得分:1)

看起来您只需要像这样从user元素中提取值:

var firstStr = document.getElementById('user').value;

这是一个有效的示例:

function reverseString(str) {
  return str.toString().split("").reverse().join("");
}

function Validation() {
var firstStr = document.getElementById('user').value;
var secondStr = reverseString(firstStr)
if (firstStr == secondStr) {
    alert("passed palindrome");
}
else {
    alert("failed palindrome");

   }
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Validation</title> 
</head>
<body>
<table>
<tr>
 <td>
  <b> Enter a random word </b>
</td>
<td>
  <input type="textbox" id="user">
</td>
</tr>
<td align = "right" colspan = "2">
  <input  type="button"  id="btnSubmit" value="Submit" onClick = 
   "Validation();">
</td>
</table>
</body>