web-dev-qa-db-fra.com

JSlint: inattendu 'pour'

J'ai testé avec des boutons radio. Tout semble aller bien jusqu'à ce que je passe à travers les peluches JS. J'ai corrigé toutes les erreurs sauf une:

"Pour" inattendu

for (i = 0; i < radios.length; i += 1) {

Voici mon Javascript:

/*global body,window,document,alert*/
(function () {
"use strict";

var UIlogic;

UIlogic = {
    myLoad: function () {
        var elems, elemText, btn1, winter, summer, fall, spring, header, btns;

        winter = "<div><input type='radio' name='cb' id='cbA' value='0'/><label for='cbA'>Winter</label></div>";
        summer = "<div><input type='radio' name='cb' id='cbB' value='1'/><label for='cbB'>Summer</label></div>";
        fall = "<div><input type='radio' name='cb' id='cbC' value='2'/><label for='cbC'>Fall</label></div>";
        spring = "<div><input type='radio' name='cb' id='cbD' value='3'/><label for='cbD'>Spring</label></div>";

        header = "Header";

        btns = "<br /><button class='btns' id='btn1'>Go!</button>";

        elemText = "Menu/nav";

        elems = "<center><div>" + header + "</div></center>";//title
        elems += "<div>" + elemText + "</div></center>";//menu
        elems += "<div id='container'><br />";//container opens
        elems += "<div id='div1'>" + winter + "</div>";
        elems += "<div id='div2'>" + summer + "</div>";
        elems += "<div id='div2'>" + fall + "</div>";
        elems += "<div id='div2'>" + spring + "</div>";
        elems += "<div id='div3'>" + btns + "</div>";
        elems += "</div>";//container closes
        elems += "<h6><div id='footer'>Ehawk 2015</div></h6>";

        body.innerHTML = elems;
        btn1 = document.getElementById("btn1");
        btn1.addEventListener('click', UIlogic.intoFunction, false);

    },
    intoFunction: function () {
        var radios, found, i = 0;
        radios = document.getElementsByName("cb");
        found = 1;
        for (i = 0; i < radios.length; i += 1) {//issue occurs here
            if (radios[i].checked) {
                alert(radios[i].value);
                found = 0;
                break;
            }
        }
        if (found === 1) {
            alert("Please Select Radio");
        }
    }
};
window.onload = function () {
    UIlogic.myLoad();
};
}());

Suis-je en train de mal faire ma boucle? pourquoi JSlint verrait-il un problème ici même si le code fonctionne? Je pourrais vraiment utiliser quelques informations sur les boucles, car j'ai le plus de problèmes avec elles. On m'a dit de ne pas les utiliser, mais je ne vois pas le problème avec l'exécution d'une boucle pour détecter les boutons radio et les radios vérifiées. Est-ce quelque chose qui devrait m'inquiéter?

javascriptjslint
43
MrEhawk82

JSLint vous suggère d'utiliser d'autres boucles telles que forEach. http://www.jslint.com/help.html#for

Vous pouvez simplement sélectionner l'option tolérer "pour l'instruction" en bas si cela vous dérange mais le code semble correct.

57
Alex

Voici la meilleure explication que j'ai pu trouver pour vous ,

Récemment, j'ai décidé de ne plus avoir besoin d'utiliser for. J'en ai fini avec les boucles for. for les boucles ont été inventées, elles sont sorties de Fortran. Ils étaient destinés à être un moyen de travailler à travers un tableau, mais dans ES5, nous avons ajouté forEach() et map() et tous les autres, je me disais 'Ouais, c'est la façon de le faire '. La syntaxe for est de toute façon si bizarre avec la chose contenant les trois instructions.

Crockford poursuit en parlant de la fin des constructions de boucles dans ES6 et de l'utilisation à la place de constructions fonctionnelles.

Vous pouvez choisir de l'ignorer - passez simplement l'option à JSLint pour tolérer for.

Supposons cependant que vous ayez décidé de supprimer la boucle for dont vous disposez. Vous pourriez avec every(). Ce serait quelque chose comme (non testé):

intoFunction: function () {
    var radios, found; 
    radios = document.getElementsByName("cb");
    found = Array.prototype.slice.call(radios).every(function(radio) {
        if (radio.checked) { 
            alert(radio.value); 
            return false; 
        }
        return true; 
    }); 

    if (found) {
        alert("Please Select Radio");
    }
}

Il est honnêtement discutable à mon avis si cela est plus facile à comprendre qu'une boucle for. Honnêtement, cela dépend des normes de codage de votre propre projet/personnel.

Mis à jour avec un extrait de travail démontrant every() pour accomplir cela.

function into() {
  var radios, found;
  radios = document.getElementsByName("cb");
  found = Array.prototype.slice.call(radios).every(function(radio) {
    if (radio.checked) {
      alert(radio.value);
      return false;
    }
    return true;
  });

  if (found) {
    alert("Please Select Radio");
  }
}

jQuery("[name='cb']").on("click", into);
jQuery("button").on("click", function() {
  jQuery("[name='cb']").prop("checked", false);
  into();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label>
    <input type="radio" name="cb" value="M">Male</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="F">Female</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="I">I don't know</label>
</p>
<p>
  <label>
    <input type="radio" name="cb" value="B">Both</label>
</p>
<p>
  <button>Clear Radios</button>
17
jdphenix