Javascript .innerHTML功能输出仅闪烁

时间:2018-08-27 16:28:44

标签: javascript html

我写了一个JS代码来查找字符串是否为回文。但是输出仅保持不到一秒钟的时间,然后消失。 我知道以前曾问过这种类型的问题,我尝试了添加“ return false”的解决方案,但是对我不起作用。

function palindrome(str) {
  var str1 = str.split("");
  var str2 = str1.reverse();
  var str3 = str2.join("");
  return str3;
}

function checkpalin() {
  var x = document.getElementById("pform").value;
  var st = palindrome(x);
  var flag = st.localeCompare(x);
  if (flag === 0)
    document.getElementById('demo').innerHTML = "Given number  is a palindrome";
  else
    document.getElementById('demo').innerHTML = "Not palindrome";
  return false;
}
<form>
  Please enter a string:<br>
  <input type="text" name="str" id="pform" onchange="return checkpalin()"><br>
</form>
<p id="demo"></p>

2 个答案:

答案 0 :(得分:2)

这是因为您以某种形式拥有它。试试这个

function palindrome(str) {
  var str1 = str.split("");
  var str2 = str1.reverse();
  var str3 = str2.join("");
  return str3;
}

function checkpalin() {
  var x = document.getElementById("pform").value;
  var st = palindrome(x);
  var flag = st.localeCompare(x);
  if (flag === 0)
    document.getElementById('demo').innerHTML = "Given number  is a palindrome";
  else
    document.getElementById('demo').innerHTML = "Not palindrome";
  return false;
}
<!DOCTYPE html>
<html>

<body>
    Please enter a string:<br>
    <input type="text" name="str" id="pform" onchange="return checkpalin()"><br>
  <p id="demo"></p>


</body>

</html>

在文本框中输入内容时,也可以使用oninput代替onchange进行更新。

function palindrome(str) {
  var str1 = str.split("");
  var str2 = str1.reverse();
  var str3 = str2.join("");
  return str3;
}

function checkpalin() {
  var x = document.getElementById("pform").value;
  var st = palindrome(x);
  var flag = st.localeCompare(x);
  if (flag === 0)
    document.getElementById('demo').innerHTML = "Given number  is a palindrome";
  else
    document.getElementById('demo').innerHTML = "Not palindrome";
  return false;
}
<!DOCTYPE html>
<html>

<body>
    Please enter a string:<br>
    <input type="text" name="str" id="pform" oninput="return checkpalin()"><br>
  <p id="demo"></p>


</body>

</html>

答案 1 :(得分:1)

在表单中的单个字段中按Enter键时,默认事件是提交表单。

在您的代码中,返回仅在Submit事件中有趣。

只需在提交或删除表单标签上使用preventDefault

function palindrome(str) {
  var str1 = str.split("");
  var str2 = str1.reverse();
  var str3 = str2.join("");
  return str3;
}

document.getElementById("myForm").onsubmit = function(e) {
  e.preventDefault();
  var x = document.getElementById("pform").value;
  var st = palindrome(x);
  var flag = st.localeCompare(x);
  document.getElementById('demo').innerHTML = flag ? "Not palindrome" : "Given string  is a palindrome";

}
<form id="myForm">
  Please enter a string and hit enter:<br>
  <input type="text" name="str" id="pform"><br>
</form>
<p id="demo"></p>