Comment concaténer une chaîne avec une variable?

Question

Donc j'essaie de créer une chaîne à partir d'une chaîne et d'une variable passée (qui est un nombre). Comment puis-je faire cela ?

J'ai quelque chose comme ceci :

function AddBorder(id){
    document.getElementById('horseThumb_'+id).className='hand positionLeft'
}

Alors comment obtenir ce 'horseThumb' et un id dans une seule chaîne ?

J'ai essayé toutes les options possibles, j'ai également fait des recherches sur Google et à part apprendre que je peux insérer une variable dans une chaîne comme ceci getElementById("horseThumb_{$id}") <-- (cela n'a pas fonctionné pour moi, je ne sais pas pourquoi) je n'ai rien trouvé d'utile. Donc toute aide serait très appréciée.

Answer 1

Votre code est correct. Peut-être que votre problème est que vous ne passez pas d'ID à la fonction AddBorder, ou qu'un élément avec cet ID n'existe pas. Ou vous pourriez exécuter votre fonction avant que l'élément en question soit accessible via le DOM du navigateur.

Depuis ECMAScript 2015, vous pouvez également utiliser les littéraux de gabarits (aussi appelés chaînes de gabarits):

document.getElementById(`horseThumb_${id}`).className = "hand positionLeft";

Pour identifier le premier cas ou déterminer la cause du deuxième cas, ajoutez ceci comme premières lignes à l'intérieur de la fonction:

alert('Numéro ID : ' + id);
alert('Valeur de retour de gEBI : ' + document.getElementById('horseThumb_' + id));

Cela ouvrira des fenêtres contextuelles à chaque fois que la fonction est appelée, avec la valeur de id et la valeur de retour de document.getElementById. Si vous obtenez undefined pour la fenêtre contextuelle du numéro ID, vous ne passez pas d'argument à la fonction. Si l'ID n'existe pas, vous obtiendriez votre numéro ID (incorrect ?) dans la première fenêtre contextuelle mais obtiendriez null dans la seconde.

Le troisième cas se produirait si votre page Web ressemble à ceci, en essayant d'exécuter AddBorder alors que la page est encore en cours de chargement:

Ma page Web

    function AddBorder(id) {
        ...
    }
    AddBorder(42);    // Ne fonctionnera pas; la page n'est pas complètement chargée!

Pour résoudre ce problème, mettez tout le code qui utilise AddBorder à l'intérieur d'un gestionnaire d'événements onload:

// On ne peut en avoir qu'un par page
window.onload = function() {
    ...
    AddBorder(42);
    ...
} 

// Ou on peut en avoir autant que nécessaire sur une page
function doWhatever() {
   ...
   AddBorder(42);
   ...
}

if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);

Answer 2

En javascript, l'opérateur "+" est utilisé pour additionner des nombres ou pour concaténer des chaînes de caractères. Si l'un des opérandes est une chaîne de caractères, "+" les concatène ; et s'il s'agit uniquement de nombres, il les additionne.

exemple :

1+2+3 == 6
"1"+2+3 == "123"

Answer 3

Cela peut arriver parce que JavaScript permet parfois les espaces blancs si une chaîne est concaténée avec un nombre. Essayez de supprimer les espaces et de créer une chaîne, puis passez-la à getElementById.

exemple:

var str = 'horseThumb_'+id;

str = str.replace(/^\s+|\s+$/g,"");

function AddBorder(id){

    document.getElementById(str).className='hand positionLeft'

}

Answer 4

C'est juste comme tu l'as fait. Et je vais te donner un petit conseil pour ce genre de choses ridicules : utilise simplement la barre d'URL du navigateur pour essayer la syntaxe JS. Par exemple, écris ceci : javascript:alert("test"+5) et tu obtiendras ta réponse. Le problème dans ton code est probablement que cet élément n'existe pas dans ton document... peut-être qu'il est à l'intérieur d'un formulaire ou quelque chose. Tu peux également tester ceci en écrivant dans l'URL : javascript:alert(document.horseThumb_5) pour vérifier où se trouve ton erreur.

Answer 5

Une autre façon de le faire plus simplement en utilisant jquery.

exemple:

fonction add(product_id){

    // le code pour ajouter le produit
    //mise à jour de la div, ici je change juste le texte à l'intérieur de la div. 
    //Vous pouvez faire n'importe quoi avec jquery, comme changer le style, la bordure etc.
    $("#added_"+product_id).html('le produit a été ajouté à la liste');

}

Où product_id est la variable javascript et $("#added_"+product_id) est un identifiant de div concaténé avec product_id, la variable de la fonction add.

Cordialement!