Personnaliser du texte avec des champs de saisie

Est-ce que quelqu'un sait comment je vais procéder pour corriger les doublons en cliquant sur les cases à cocher?Personnaliser du texte avec des champs de saisie

<label><input type="checkbox" data-bValue="100" data-sValue="sV1" data-nValue="nV1" name="layers"> 100</label><label><input type="checkbox" data-bValue="200" data-sValue="sV2" data-nValue="nV2" name="layers"> 200</label><label><input type="checkbox" data-bValue="300" data-sValue="sV3" data-nValue="nV3" name="layers"> 300</label><label><input type="checkbox" data-bValue="400" data-sValue="sV4" data-nValue="nV4" name="layers"> 400</label><label><input type="checkbox" data-bValue="500" data-sValue="sV5" data-nValue="nV5" name="layers"> 500</label><label><input type="checkbox" data-bValue="600" data-sValue="sV6" data-nValue="nV6" name="layers"> 600</label><label><input type="checkbox" data-bValue="700" data-sValue="sV7" data-nValue="nV7" name="layers"> 700</label><h1 id="render"></h1>

Ma recherche m'a fait croire que je dois refaire tout cela, mais je pensais que je demande ici d'abord.

Fiddle: https://jsfiddle.net/swedoc/Lwr16wrt/

$(document).ready(function() { 

    var scents = []; 
    var notes = []; 
    var theRender = document.getElementById("render"); 

    $("input[name='layers']").on('click', function(){ 

       $.each($("input[name='layers']:checked"), function(){    
        scents.push($(this).attr("data-sValue")); 
       });   

       $.each($("input[name='layers']:checked"), function(){    
        notes.push($(this).attr("data-nValue")); 
       }); 

        theRender.innerHTML 
        += "You’ve created a<br>" 
        + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
        + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";       
    }); 
});

Source

2017-08-01 swedoc

Désolé, je ne comprends pas ce que vous essayez de faire. Je t'ai vérifié. Et leur est plus d'une chose troublante. Alors qu'est-ce que vous voyez exactement comme un problème? – JBO

Désolé ma mauvaise. Si vous cochez les cases, il conserve plus de valeurs mais ne supprime pas le précédent. Donc, il suffit d'empiler des valeurs encore et encore. Je veux mettre à jour le texte de "theRender.innerHTML" – swedoc

@JBO Merci pour les réponses, mais je pense que je l'ai résolu en ajoutant theRender.innerHTML = ''; à l'intérieur du $ ("input [name = 'layers']") et il semble fonctionner maintenant :) Je suppose qu'il suffit d'une référence à une valeur par défaut – swedoc

La réponse est tout au sujet de la portée des variables. Vous devez déclarer vos tableaux dans votre fonction et non à l'extérieur.

Supprimez également le "+" de votre innerHTML +=.

$("input[name='layers']").on('click', function(){ 
    var scents = []; 
    var notes = []; 

    $.each($("input[name='layers']:checked"), function(){    
     scents.push($(this).attr("data-sValue")); 
    });   

    $.each($("input[name='layers']:checked"), function(){    
     notes.push($(this).attr("data-nValue")); 
    }); 

    theRender.innerHTML = "You’ve created a<br>" 
     + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
     + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";       
});

Voici votre fiddleJs corrigé: https://jsfiddle.net/Lwr16wrt/23/

Source

2017-08-02 09:25:46 JBO

Voilà! :) – swedoc

Personnaliser du texte avec des champs de saisie

Répondre

Questions connexes