输入文本框不断被擦除，以及输入效果答案

【问题标题】：Input Text Box keeps getting erased, along with input effects输入文本框不断被擦除，以及输入效果
【发布时间】：2020-01-22 21:08:58
【问题描述】：

我正在尝试创建一个简单的文本输入框。当按下提交按钮时，文本框中的输入被发送到搜索脚本，该脚本将输入与可能值的数组进行比较。

但是，一旦我按下提交按钮，函数的正确结果在屏幕上快速闪烁，之后文本框返回默认值，函数结果又快速消失。这一切都发生在大约 100 毫秒的时间内。

谁能解释我如何防止这种重置发生？我一直在网上到处找，只能找到问如何重置它的人，所以我有点困惑我做错了什么。

Result after pressing submit Result right after displaying the result 正文：

<body>
<div id="blogmenu"></div>

<div ID="RECEPT">
<h1>Search Bar</h1>
<br>

<h2> Time for Searchin' </h2>

<form name="inputForm">                                                                                                                                                                                
    <div><input type="text" min="1" max="50" value="" class="slider" id="a" name="a"></div>
    <div><input type="submit" onclick="SearchItem(document.getElementById('a').value);"></div>
</form>

<div ID="ijsjes" style="display:none"> IJsjes </div>

<div ID="spaghetti" style="display:none"> Spaghetti </div>

<div ID="gniocchi" style="display:none"> Gniocchi </div>

<div ID="bananen" style="display:none"> Bananen </div>



</div>

</body>

功能：

<script>

function SearchItem(Term) {

    console.log('I did get here');
    document.getElementById('a').value = Term;

    var ijsjes = {
        kleur : "wit",
        smaak : "zoet",
        type : "dessert"
    };
    var spaghetti = {
        kleur : "geel",
        smaak : "hartig",
        type : "pasta"
    };
    var gniocchi = {
        kleur : "geel",
        smaak : "hartig",
        type : "pasta"
    };
    var bananen = {
        kleur : "geel",
        smaak : "zoet",
        type : "fruit"
    };

    console.log(spaghetti.kleur + " also " + (spaghetti.kleur == Term));

    if (ijsjes.kleur == Term) {
        document.getElementById('ijsjes').style.display = 'block';
        console.log('ijsjes matched');
    } else {
        document.getElementById('ijsjes').style.display = 'none';
        console.log('ijsjes not matched');
    }

    if (spaghetti.kleur == Term) {
        document.getElementById('spaghetti').style.display = 'block';
        console.log('spaghetti matched');
    } else {
        document.getElementById('spaghetti').style.display = 'none';
        console.log('spaghetti not matched');
    }

    if (gniocchi.kleur = Term) {
        document.getElementById('gniocchi').style.display = 'block';
        console.log('gniocchi matched');
    } else {
        document.getElementById('gniocchi').style.display = 'none';
        console.log('gniocchi not matched');
    }

    if (bananen.kleur = Term) {
        document.getElementById('bananen').style.display = 'block';
        console.log('bananen matched');
    } else {
        document.getElementById('bananen').style.display = 'none';
        console.log('bananen not matched');
    }
}

</script>

【问题讨论】：

您的最后 2 个条件（最后 2 个 if-else 块）是在赋值而不是比较。
我注意到，这不是问题所在，它只是意味着这些值将始终显示出来。

标签： javascript html forms input text

【解决方案1】：

您的最后 2 个条件（最后 2 个 if-else 块）正在分配值而不是比较。因此，您的值会在被覆盖之前打印一段时间。 p>
另外，一旦找到元素/搜索值，就应该中断/停止，因为其他 if/else 语句会覆盖以前的结果。实现此目的的一种方法是具有嵌套的 if-else，以便仅在不满足条件/值时才继续执行代码。
input type="button" 回发，所以你使用onclick函数调用javascript，所以你不需要在任何地方提交数据。只需输入 type="button" 而不是 "submit"

【讨论】：

【解决方案2】：

您的输入是submit 类型，默认情况下会触发form 的onsubmit 函数，默认情况下会在您的页面上回发

您可以删除表单并将按钮更改为 type="button" 或将函数移动到表单的 onsubmit 属性（如在我的 sn-p 中）并使用 event.preventDefault() 停止回帖

function SearchItem(event) {
  event.preventDefault();

  var Term = document.getElementById('a').value;

  console.log('I did get here');
  document.getElementById('a').value = Term;

  var ijsjes = {
    kleur: "wit",
    smaak: "zoet",
    type: "dessert"
  };
  var spaghetti = {
    kleur: "geel",
    smaak: "hartig",
    type: "pasta"
  };
  var gniocchi = {
    kleur: "geel",
    smaak: "hartig",
    type: "pasta"
  };
  var bananen = {
    kleur: "geel",
    smaak: "zoet",
    type: "fruit"
  };

  console.log(spaghetti.kleur + " also " + (spaghetti.kleur == Term));

  if (ijsjes.kleur == Term) {
    document.getElementById('ijsjes').style.display = 'block';
    console.log('ijsjes matched');
  } else {
    document.getElementById('ijsjes').style.display = 'none';
    console.log('ijsjes not matched');
  }

  if (spaghetti.kleur == Term) {
    document.getElementById('spaghetti').style.display = 'block';
    console.log('spaghetti matched');
  } else {
    document.getElementById('spaghetti').style.display = 'none';
    console.log('spaghetti not matched');
  }

  if (gniocchi.kleur = Term) {
    document.getElementById('gniocchi').style.display = 'block';
    console.log('gniocchi matched');
  } else {
    document.getElementById('gniocchi').style.display = 'none';
    console.log('gniocchi not matched');
  }

  if (bananen.kleur = Term) {
    document.getElementById('bananen').style.display = 'block';
    console.log('bananen matched');
  } else {
    document.getElementById('bananen').style.display = 'none';
    console.log('bananen not matched');
  }
}

<body>
  <div id="blogmenu"></div>

  <div ID="RECEPT">
    <h1>Search Bar</h1>
    <br>

    <h2> Time for Searchin' </h2>

    <form name="inputForm"  onsubmit="SearchItem(event)">
      <div><input type="text" min="1" max="50" value="" class="slider" id="a" name="a"></div>
      <div><input type="submit"></div>
    </form>

    <div ID="ijsjes" style="display:none"> IJsjes </div>

    <div ID="spaghetti" style="display:none"> Spaghetti </div>

    <div ID="gniocchi" style="display:none"> Gniocchi </div>

    <div ID="bananen" style="display:none"> Bananen </div>



  </div>

</body>

【讨论】：