JavaScript: J'ai un tableau. Je veux vérifier si le premier élément est un

Question

OK, donc voici mon problème original. Vous n'avez pas besoin de le lire mais au cas où cela vous aiderait: Firefox thinks <fieldset> is a form element; Chrome doesn't

Fondamentalement, Firefox et IE comptent le fieldset dans mon HTML en tant qu'élément dans mon tableau, et qui tout vider. Mais Google Chrome ne compte pas le fieldset en tant qu'élément de tableau. J'essaie de résoudre le problème en définissant le nouveau tableau d'une manière si le navigateur compte le fieldset, et en le configurant différemment si c'est le cas. Voici mon code. Je pense que le problème est avec l'instruction if.

var $ = function (id) { return document.getElementById(id); } 

function check() { 
var x = $("myForm"); 

var user = new Array(); 
var type = x.elements[0].type; 
    if (x.elements[0].nodeName=="fieldset") { 
    user[0] = x.elements[1].value; 
    user[1] = x.elements[3].value; 
    user[2] = x.elements[5].value; 
    user[3] = x.elements[2].value; 
    user[4] = x.elements[4].value; 
    user[5] = x.elements[6].value; 
} else { 
    user[0] = x.elements[0].value; 
    user[1] = x.elements[2].value; 
    user[2] = x.elements[4].value; 
    user[3] = x.elements[1].value; 
    user[4] = x.elements[3].value; 
    user[5] = x.elements[5].value; 
} 

var answers = new Array(); 
answers[0] = "sample1"; 
answers[1] = "sample2"; 
answers[2] = "sample3"; 
answers[3] = "sample4"; 
answers[4] = "sample5"; 
answers[5] = "sample6"; 

var display = new Array(); 
for (var i=0;i<6;i++) { 
    if (user[i] == "") { 
     display[i] = "You entered nothing."; 
     } 
    else if (user[i] == answers[i]) { 
     display[i] = "Correct!"; 
     } 
    else { 
     display[i] = "Wrong. The correct answer is \"" + answers[i] + "\"."; 
     } 
    } 
alert(display[0] + "\n" + display[1] + "\n" + display[2] + "\n" + display[3] + "\n" + display[4] + "\n" + display[5]); 
} 

Answer 1

Le problème que vous rencontrez est principalement parce nodeNamegénéralement retours majuscules texte (en fonction du navigateur), et que vous comparez avec les minuscules fieldset. Pour le rendre cohérent, vous devez utiliser la fonction toLowerCase de la chaîne. À propos des conditions: Je pense qu'un moyen plus élégant serait de créer un nouveau tableau filtered sans <fieldset> et soumettre le bouton. Enfin, la façon dont vous créez vos tableaux implique un peu trop de dactylographie.

Je vous suggère l'utilisation literal notation pour créer Arrays et Objects.

[Demo] (cliquez sur Aperçu)

function $(id) { return document.getElementById(id); } 

var filtered = []; 
var elements = $("myForm").elements; 
var len = elements.length; 

// opt out fieldsets and submit buttons 
for (var i = 0; i < len; i++) { 
    var el = elements[i]; 
    if (el.nodeName.toLowerCase() != "fieldset" && el.type != "submit") { 
    filtered.push(el); 
    } 
} 

// specify an order (of indices) 
var user = [1, 3, 5, 2, 4, 6]; 

// then replace numbers with element 
// values from the filtered array 
for (var i = 0; i < user.length; i++) { 
    user[i] = filtered[ user[i] ].value; 
}