为什么即使表单调用的函数末尾存在“ return false”，表单上的“提交”按钮仍会刷新页面？

Question

In this assignment I'm supposed to "Write an application that searches for words in an array and creates a new array of found words and an array of search words that are not found. The application will display the new arrays of found and not-found words every time a new word is entered." I'm not sure what the problem is in my code, but every time I press 'submit on the web page it refreshes. Nothing is outputted correctly.

Unfortunately, this is an assignment I've left alone for a long time, but now that it's getting to be the end of the school year, I need to get it done. I do not have as good an understanding of JavaScript as I did when I was initially working on it. I fiddled with it for a bit, but couldn't figure out what was wrong. I will provide the relevant code from both the html and js file.

HTML File

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

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;
    }

I know I brought this onto myself by procrastinating, but I'm in a real bind! Any help is appreciated! Also, apologies if I've broken site etiquette. This is my first time looking at it much, not to mention making a post.

Also worth noting, this is for a semester-long class in high school, nothing fancy.

Edit: To clarify, I have been led to believe in the course of this curriculum that simple adding 'return false' at the end of the function that is called upon by the form is enough to prevent the page from being reloaded. I have completed other assignments where it's worked just fine, but doesn't in this one. I'm asking for help with finding what in my code is preventing it from doing what the assignment asks it to, as written in the first paragraph of the post.

Answer 1

您可以尝试在HTML中使用<button type="button> </button> ，它不应刷新页面，并且您可以在按钮上使用js click事件来继续应用程序的下一步操作。如果表单未填写，您可以使用js来使按钮具有不允许的光标样式。

Answer 2

Here you go. Hope it helps you. :)

 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> 

Here is a more advanced and easier version to help you improve your code in the future :)

 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> 

Answer 3

It's typically the opportunity to use a set
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

but you also may use Array​.prototype​.includes()
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

to diseable page reload you have to use : Event​.prevent​Default() => https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

but this one works on the form, not on the button, has I show it in my snippet :

 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>