Почему кнопка «отправить» в форме постоянно обновляет страницу, даже если в конце функции, вызванной формой, присутствует «return false»?

Question

В этом задании я должен «написать приложение, которое ищет слова в массиве и создает новый массив найденных слов и массив поисковых слов, которые не найдены. Приложение отобразит новые массивы найденныхи не найденные слова каждый раз, когда вводится новое слово ".Я не уверен, в чем проблема в моем коде, но каждый раз, когда я нажимаю «отправить» на веб-странице, он обновляется.Ничего не выводится правильно.

К сожалению, это задание я оставил один на долгое время, но теперь, когда наступает конец учебного года, мне нужно выполнить его.Я не так хорошо разбираюсь в JavaScript, как в начале работы над ним.Я немного возился с этим, но не мог понять, что случилось.Я предоставлю соответствующий код из файла html и js.

HTML-файл

<form id="searchFormId" action="6.2assignment2.html#" onsubmit="return assignment62_2Part1();">

  <label class="formLabel" for="entry">Entry: </label>
  <input id="entry" name="entry">

  <input type="submit" name="runExample" value="Enter" class="formatSubmit">

    </form>

    <!-- Ordered list of found words -->
    <h>Found Words</h>
    <ol id="foundWordsList"></ol>

    <!-- Ordered list of unfound words -->
    <h>Unfound Words</h>
    <ol id="unfoundWordsList"></ol>

JS-файл

var rightWords = ["JavaScript", "was", "developed", "by", "Brendan", "Eich",
                  "at", "Netscape", "as", "the", "in-page", "scripting",
                  "language", "for", "Navigator", "2.", "It", "is", "a",
                  "remarkably", "expressive", "dynamic", "programming",
                  "language.", "Because", "of", "its", "linkage", "to", "web",
                  "browsers", "it", "instantly", "became", "massively",
                  "popular.", "It", "never", "got", "a", "trial", "period",
                  "in", "which", "it", "could", "be", "corrected", "and",
                  "polished", "based", "on", "actual", "use", "The",
                  "language", "is", "powerful", "and", "flawed"];

// Get elements
var form = document.getElementById("searchFormId");
var foundList = document.getElementById("foundWordsList");
var unfoundList = document.getElementById("unfoundWordsList");

// Variable to hold user entry
var userEntry;

// Found/unfound word arrays
var foundWords = [];
var unfoundWords = [];

    function assignment62_2Part1() {
        // PART 1: YOUR CODE STARTS AFTER THIS LINE
        // What happens after Enter is pressed

        // Check if word was found
        var valueFound = false;

        // Reset output
        foundList.innerHTML = "";
        unfoundList.innerHTML = "";

        // Get user response 
        userEntry = form.entry.value;

        // Search and compare
        var i;
        for (i = 0; i < rightWords; i++) {
            if (userEntry === rightWords[i]) {
                valueFound = true;
                break;
            }
        }

        if (valueFound) {
            foundWords.push(userEntry);
        } else {
                unfoundWords.push(userEntry);
        }   

        // Output
        for (i = 0; i < foundWords; i++) {
            foundList.innerHTML += "<li>" + foundWords[i] + "</li>";
        }

        for (i = 0; i < unfoundWords; i++) {
            unfoundList.innerHTML += "<li>" + unfoundWords[i] + "</li>";
        } 

        return false;
    }

Я знаю, что перенес это на себяоткладываю, но я в полном затруднении!Любая помощь приветствуется!Кроме того, извинения, если я нарушил этикет сайта.Это мой первый раз, когда я смотрю на него много, не говоря уже о создании поста.

Также стоит отметить, это для семестрового класса в средней школе, ничего особенного.

Редактировать:Чтобы уточнить, меня заставили поверить в ходе этой учебной программы, что простого добавления «return false» в конце функции, вызываемой формой, достаточно, чтобы предотвратить перезагрузку страницы.Я выполнил другие задания, где он работал просто отлично, но не в этом.Я прошу помощи в поиске того, что в моем коде мешает ему делать то, к чему просит назначение, как написано в первом абзаце поста.

Answer 1

Вы можете попытаться использовать <button type="button> </button> в своем html-файле, он не должен обновлять страницу, и вы можете использовать js click на вашей кнопке, чтобы продолжить выполнение приложения.Если вы хотите, чтобы элементы формы продолжались, вы можете использовать js для придания кнопке недопустимого стиля курсора, если форма не заполнена.

Answer 2

Обычно это возможность использовать set
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

, но вы также можете использовать Array .prototype .includes ()
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

для исправной перезагрузки страницы необходимо использовать: Событие .prevent По умолчанию () => https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

но этот работает на форме, а не на кнопке, я показываю это в своем фрагменте:

const
    form        = document.getElementById('searchFormId')
  , foundList   = document.getElementById('foundWordsList')
  , unfoundList = document.getElementById('unfoundWordsList')
  , rightWords  = new Set(
    [ 'JavaScript', 'was', 'developed', 'by', 'Brendan', 'Eich'
    , 'at', 'Netscape', 'as', 'the', 'in-page', 'scripting'
    , 'language', 'for', 'Navigator', '2.', 'It', 'is', 'a'
    , 'remarkably', 'expressive', 'dynamic', 'programming'
    , 'language.', 'Because', 'of', 'its', 'linkage', 'to', 'web'
    , 'browsers', 'it', 'instantly', 'became', 'massively'
    , 'popular.', 'It', 'never', 'got', 'a', 'trial', 'period'
    , 'in', 'which', 'it', 'could', 'be', 'corrected', 'and'
    , 'polished', 'based', 'on', 'actual', 'use', 'The'
    , 'language', 'is', 'powerful', 'and', 'flawed'
    ])
  ;

form.onsubmit = function(evt)
{
  evt.preventDefault();  // disable form sending action
  let
    userEntry  = form.entry.value
  , valueFound = rightWords.has( userEntry )
  , LI_elm     = document.createElement('li')
  ;
  form.entry.value   = '';
  LI_elm.textContent = userEntry;

  if (valueFound) { foundList.appendChild( LI_elm )   }
  else            { unfoundList.appendChild( LI_elm ) }
}

<form id="searchFormId" >

  <label class="formLabel" for="entry">Entry: </label>
  <input id="entry" name="entry">

  <button type="submit"  class="formatSubmit"> Enter </button>

</form>

<!-- Ordered list of found words -->
<h2>Found Words</h2>
<ol id="foundWordsList"></ol>

<!-- Ordered list of unfound words -->
<h2>Unfound Words</h2>
<ol id="unfoundWordsList"></ol>

Answer 3

Вот, пожалуйста.Надеюсь, это поможет вам.:)

var rightWords = ["JavaScript", "was", "developed", "by", "Brendan", "Eich",
  "at", "Netscape", "as", "the", "in-page", "scripting",
  "language", "for", "Navigator", "2.", "It", "is", "a",
  "remarkably", "expressive", "dynamic", "programming",
  "language.", "Because", "of", "its", "linkage", "to", "web",
  "browsers", "it", "instantly", "became", "massively",
  "popular.", "It", "never", "got", "a", "trial", "period",
  "in", "which", "it", "could", "be", "corrected", "and",
  "polished", "based", "on", "actual", "use", "The",
  "language", "is", "powerful", "and", "flawed"
];

// Get elements
var form = document.getElementById("searchFormId");
var foundList = document.getElementById("foundWordsList");
var unfoundList = document.getElementById("unfoundWordsList");

// Variable to hold user entry
var userEntry;

// Found/unfound word arrays
var foundWords = [];
var unfoundWords = [];

function assignment62_2Part1() {

  // Check if word was found
  var valueFound = false;

  // Reset output
  foundList.innerHTML = "";
  unfoundList.innerHTML = "";

  // Get user response 
  userEntry = entry.value;

  // Search and compare
  var i;
  for (i = 0; i < rightWords.length; i++) {
    if (userEntry === rightWords[i]) {
      valueFound = true;
      break;
    }
  }

  if (valueFound) {
    foundWords.push(userEntry);
  } else {
    unfoundWords.push(userEntry);
  }

  // Output
  for (i = 0; i < foundWords.length; i++) {
    foundList.innerHTML += "<li>" + foundWords[i] + "</li>";
  }

  for (i = 0; i < unfoundWords.length; i++) {
    unfoundList.innerHTML += "<li>" + unfoundWords[i] + "</li>";
  }

  return false;
}

<label class="formLabel" for="entry">Entry: </label>
<input id="entry" name="entry">

<input type="button" name="runExample" value="Enter" class="formatSubmit" onclick="assignment62_2Part1();" />

<!-- Ordered list of found words -->
<h4>Found Words</h4>
<ol id="foundWordsList"></ol>

<!-- Ordered list of unfound words -->
<h4>Unfound Words</h4>
<ol id="unfoundWordsList"></ol>

Вот более продвинутая и простая версия, которая поможет вам улучшить ваш код в будущем:)

var rightWords = ["JavaScript", "was", "developed", "by", "Brendan", "Eich",
  "at", "Netscape", "as", "the", "in-page", "scripting",
  "language", "for", "Navigator", "2.", "It", "is", "a",
  "remarkably", "expressive", "dynamic", "programming",
  "language.", "Because", "of", "its", "linkage", "to", "web",
  "browsers", "it", "instantly", "became", "massively",
  "popular.", "It", "never", "got", "a", "trial", "period",
  "in", "which", "it", "could", "be", "corrected", "and",
  "polished", "based", "on", "actual", "use", "The",
  "language", "is", "powerful", "and", "flawed"
];

var foundWords = [];
var unfoundWords = [];

btn.onclick = ()=>{
    (rightWords.indexOf(entry.value) > 0 ? foundWords : unfoundWords)
        .push("<li>" + entry.value + "</li>");

    foundWordsList.innerHTML = foundWords.join('');
    unfoundWordsList.innerHTML = unfoundWords.join('');
}

<label class="formLabel" for="entry">Entry: </label>
<input id="entry" name="entry">

<input type="button" id='btn' name="runExample" value="Enter" class="formatSubmit" />

<!-- Ordered list of found words -->
<h4>Found Words</h4>
<ol id="foundWordsList"></ol>

<!-- Ordered list of unfound words -->
<h4>Unfound Words</h4>
<ol id="unfoundWordsList"></ol>