Wo/wann/warum fällt das erste Array-Element?

Question

Meine Aufgabe besteht darin, ein Textfeld zu haben, das Benutzereingaben akzeptiert, diese Eingabe in ein Array überträgt und dann anhand eines Kontrollkästchens ein fest codiertes Array untersucht, um auszuwerten, ob die Benutzereingabeelemente mit dem hartcodierten Array übereinstimmen Elemente.

Im einfachsten Fall, wo die Saiten genau (auf Groß- und Kleinschreibung basiert) übereinstimmen muss, stimmt meine Codewörter mit, das Spiel zu tun, und ignoriert Wörter, die nicht übereinstimmen. Ich füge die übereinstimmenden Wörter einer Zeichenfolge hinzu und zeige dann die Zeichenfolge in einer Warnung an.

JEDOCH: im zweiten Fall, in dem die Zeichenfolgen die Groß-/Kleinschreibung ignorieren sollen (so kann der Benutzer Groß- und Kleinbuchstaben eingeben), wird bei der Anzeige der Liste der übereinstimmenden Namen immer das erste eingegebene Wort gelöscht in der Benutzereingabe Textfeld. Die Groß-/Kleinschreibungslogik scheint zu funktionieren - das Problem ist, dass eines der Wörter gelöscht wird.

Hier ist mein Code zuerst für die HTML-

function process() { 
 

 
//create string to store user input 
 
var s = document.getElementById("inputTextBox").value; 
 

 
//testing text area to display captured input 
 
document.getElementById("textArea").value = s; 
 

 
//create array to store user input 
 
var inputArray = []; 
 

 
//create array of names to check user input against 
 
var namesArray = ["John", "Bill", "Mary", "Ted", "Roger"]; 
 

 
//split the string by spaces 
 
var input = s.split(" "); 
 

 
//put the split string into the inputArray 
 
inputArray = s.split(" "); 
 

 
//determine length of arrays 
 
var inputArrayLength = inputArray.length; 
 
var nameArrayLength = namesArray.length; 
 

 
//create string to hold matched names 
 
var matchedNames = ""; 
 

 
for(var i = 0; i < inputArrayLength; i++) 
 
{ 
 
    //set current name string to current array element 
 
    currName = inputArray[i]; 
 

 
    //first determine if the checkbox IS checked 
 
    if ((document.getElementById("checkBox").checked) == true) 
 
    { 
 
     //if it is checked, determine if currName == name in namesArray 
 
     if (currName == 'John' || currName == 'Bill' || currName == 'Mary' || currName == 'Ted' || currName == 'Roger') 
 
     { 
 
      matchedNames = matchedNames.concat(currName + " "); 
 
     }} 
 

 
    //if it is NOT checked 
 
    else if ((document.getElementById("checkBox").checked) == false) 
 
    { 
 
     //traverse array and toLowerCase all elements 
 
     for (var j = 0; j < inputArrayLength; j++) 
 
     { 
 
      inputArray[j] = inputArray[j].toLowerCase(); 
 
     } 
 

 
     //then determine if toLowerCase string is present in array 
 
     if (currName == 'john' || currName == 'bill' || currName == 'mary' || currName == 'ted' || currName == 'roger') 
 
     { 
 
      matchedNames = matchedNames.concat(currName + " "); 
 
     } 
 
    } 
 
} 
 

 
document.getElementById("textArea").value = matchedNames; 
 

 
//alert matched names 
 
alert("Matched Names: " + matchedNames + "."); 
 
}

<label>Please enter a series of first names, separated by spaces</label> 
 
<br /> 
 
<input id="inputTextBox" type="text" name="textBox1" style="width: 200px;"/> 
 
<br /> 
 
<label><input id="checkBox" type="checkbox" name="checkbox1" />toggle case sensitivity</label> 
 
<br /> 
 
<input id="Button1" type="button" value="Process" onclick="process();"/> 
 
<br /> 
 
<textarea id="textArea" name="textArea1" rows="2" cols="1" style="width: 400px;"></textarea>

shell

Ich bin mir bewusst, viele stilistische Probleme (crappy Namen) gibt es einige ernsthafte Redundanz, und dass dies wahrscheinlich angezogen werden könnten logisch, um weniger Zeilen und etc. zu verwenden

Answer 1

Der Grund, warum es nicht funktioniert, ist, dass Sie die inputArray in Kleinbuchstaben in der ersten Iteration der Schleife konvertieren, aber Sienicht konvertierenist immer noch der ursprüngliche Wert.

Bei nachfolgenden Iterationen currName wird aus dem nun kleingeschrieben Array gezogen, so dass sie richtig passen.

In jedem Fall ist hier eine viel einfachere Methode Array.prototype.filter und Array.prototype.indexOf mit

//create array of names to check user input against 
 
var namesArray = ["John", "Bill", "Mary", "Ted", "Roger"]; 
 
var lowerCaseNamesArray = namesArray.map(name => name.toLowerCase()) 
 

 
function process() { 
 

 
    //create string to store user input 
 
    var s = document.getElementById("inputTextBox").value; 
 

 
    // are we doing case-sensitive checks 
 
    var caseSensitive = document.getElementById("checkBox").checked; 
 
    if (!caseSensitive) { 
 
    s = s.toLowerCase(); 
 
    } 
 

 
    //create array to store user input 
 
    var inputArray = s.split(" "); 
 
    
 
    // which array should we check? 
 
    var checkArray = caseSensitive ? namesArray : lowerCaseNamesArray; 
 
    
 
    var matchedNames = inputArray.filter(function(currName) { 
 
    return checkArray.indexOf(nameToCheck) !== -1; 
 
    }); 
 

 
    document.getElementById("textArea").value = matchedNames.join(' '); 
 
}

<label>Please enter a series of first names, separated by spaces</label> 
 
<br /> 
 
<input id="inputTextBox" type="text" name="textBox1" style="width: 200px;" /> 
 
<br /> 
 
<label><input id="checkBox" type="checkbox" name="checkbox1" />toggle case sensitivity</label> 
 
<br /> 
 
<input id="Button1" type="button" value="Process" onclick="process();" /> 
 
<br /> 
 
<textarea id="textArea" name="textArea1" rows="2" cols="1" style="width: 400px;"></textarea>

Answer 2

dies wahrscheinlich logisch weniger Linien

Logic zu verwenden, verschärft werden könnte ist im Grunde die Quelle Ihrer Probleme. Sie haben eine Schleife, um jede currName zu testen. Innerhalb der Schleife überprüfen Sie, ob das Kontrollkästchen aktiviert ist. Ist dies nicht der Fall, wird das Eingabearray kleingeschrieben. aber der erste currName wurde vor dem Unterkasten herausgenommen. Also, wenn Sie eingeben John Mary Bill, werden Sie das nicht kleingeschrieben John vergleichen und dann die mary und bill kleingeschrieben. Der nicht-kleinkalibrige John ist offensichtlich nicht gleich john. Zusätzlich erfolgt die Unterkaskade des gesamten Arrays für jedes Element des Arrays, was dem Code eine unnötige exponentielle Komplexität hinzufügt (d. H. Unnötig ineffizient).

Es wäre viel einfacher, nur die Eingabezeichenfolge bei der sehr klein geschrieben starten (vor der Schleife, vor der Spaltung, auch):

if (caseSensitive) { 
    s = s.toLowerCase(); 
} 
var input = s.split(" "); 

oder zumindest jede currName in Kleinbuchstaben, wie es ist, genommen wird aus dem Array:

var origCurrName = inputArray[i]; 
var currName = origCurrName; 
if (caseSensitive) { 
    currName = currName.toLowerCase(); 
} 

Einige weitere Hinweise:

• Sie müssen nicht testen w etwas anderes ist true; Die if Bedingung wird ausgelöst, wenn der Ausdruck truthy ist (was true ist, und false ist nicht).
• Wenn Sie es wissen, nur zwei Möglichkeiten zu sein (wie truthy und falsy, geprüft und ungeprüft), brauchen Sie nicht else if zu verwenden, eine einfache else genügt
• Sie nie die Variable input
• Unter caseSensitive verwenden bevor die Schleife effizienter ist und tut viel Code Lesbarkeit zu verbessern ... wenn es nur haben Sie verwendet würde :)

EDIT: Derp, in Scrollen, verwechselte ich für deine var caseSensitive... Linie Phil. Entschuldigung für Phil und OP.

Answer 3

während des Abgleichprozesses im zweiten Fall haben Sie die currName nicht in Kleinbuchstaben konvertiert. So können Sie einfach tun currName.toLowerCase() == "john" und so weiter ..