Текстовое поле ввода стирается вместе с эффектами ввода - PullRequest
Новая
       8

Текстовое поле ввода стирается вместе с эффектами ввода

0 голосов
/ 22 сентября 2019

Я пытаюсь создать простое поле ввода текста.При нажатии кнопки отправки входные данные в текстовом поле отправляются в сценарий поиска, который сравнивает входные данные с массивом возможных значений.

Однако, как только я нажимаю кнопку отправки, правильный результатфункция быстро мигает на экране, после чего возвращается значение по умолчанию для текстового поля, и результат функции снова быстро исчезает.Все это происходит примерно за 100 мс.

Может кто-нибудь объяснить, как я могу предотвратить этот сброс?Я везде смотрю в Интернете и могу найти только тех, кто спрашивает, как его сбросить, поэтому я немного озадачен тем, что я делаю неправильно.

Результат после нажатия кнопки Отправить Результат сразу после отображения результата Тело: 

<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 ]

1 голос
/ 22 сентября 2019

Ваш ввод имеет тип submit, что по умолчанию приведет к срабатыванию функции onsubmit вашего form, которая по умолчанию выполняет обратную передачу на вашей странице

. Вы можете либо удалитьсформируйте и измените вашу кнопку на type="button" или переместите функцию в свойство onsubmit формы (как в моем фрагменте) и используйте 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>
0 голосов
/ 22 сентября 2019

  1. Ваши последние 2 условия (последние 2 блока if-else) присваивают значение, а не сравнивают . Из-за этого ваше значение некоторое время печатается перед перезаписью.

  2. Также, как только вы найдете значение элемента / поиска, вы должны прервать / остановить, потому что другие операторы if / else перезапишут предыдущие результаты .One wayчтобы достичь этого, необходимо иметь вложенное if-else, чтобы выполнение кода продолжалось только тогда, когда условия / значения не выполняются.

  3. Тип ввода = "кнопка" выполняет обратную передачу , поэтому вы используете функцию onclick для вызова javascript, поэтому вам не нужно никуда отправлять данные.Просто введите input type = "button" вместо "submit"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...