Passer un paramètre de type chaîne de caractères dans une fonction onclick

Question

Passer un paramètre de type chaîne de caractères dans une fonction onclick

Demandé el 10 de Mars, 2012: Quand la question a-t-elle été
114784 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais passer un paramètre (c'est-à-dire une chaîne) à une fonction Onclick.

Pour le moment, je fais ça :

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

avec result.name par exemple égal à la chaîne "Add".

Quand je clique sur ce bouton, j'ai une erreur qui dit que "Ajouter n'est pas défini" . Puisque cet appel de fonction fonctionne parfaitement avec un paramètre numérique, je suppose que cela a quelque chose à voir avec les symboles "" dans la chaîne.

Comment puis-je résoudre ce problème ?

Demandé el 10 de Mars, 2012 par Consec

1 votes

Dans ce cas, il est peut-être préférable de ne pas utiliser de gestionnaires d'événements en ligne.

Commenté el 10 de Mars, 2012 par Felix Kling

1 votes

Votre problème est dû au fait que la variable n'est pas échappée correctement. Vérifiez ma réponse

Commenté el 10 de Mars, 2012 par Starx

Answer 1

5 Réponses

Answer 2

408voto

david Points 5559

Il semble que vous construisiez des éléments DOM à partir de chaînes de caractères. Vous devez juste ajouter des guillemets autour de result.name :

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Mais vous devriez vraiment le faire avec les méthodes DOM appropriées.

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

document.body.appendChild(inputElement);

Soyez juste conscient que si c'est une boucle ou autre, result changera avant le déclenchement de l'événement et vous devrez créer une bulle de portée supplémentaire pour suivre la variable en cours de modification.

Répondu el 10 de Mars, 2012 par david (5559 Points )

7 votes

Ce formatage des symboles fonctionne, donc merci beaucoup.

Commenté el 10 de Mars, 2012 par Consec

4 votes

Bonjour @david...J'ai un doute...Je veux passer plusieurs arguments dans ce onclick...comment est-ce possible ? pouvez-vous me rendre utile... ?

Commenté el 22 de Août, 2013 par VIVEK-MDU

2 votes

@david,merci cela a résolu mon problème de paramètre de chaîne mais maintenant je dois passer (chaîne, booléen). que faire pour cela ?

Commenté el 21 de Janvier, 2014 par Zaveed Abbasi

Afficher 8 autres commentaires

Answer 3

49voto

Sairam Krish Points 493

J'ai quelques inquiétudes concernant l'utilisation de l'échappement des chaînes de caractères dans onClick. Au fur et à mesure que le nombre d'arguments augmentera, la maintenance deviendra fastidieuse.

L'approche suivante aura un seul saut - Sur le clic - prendre le contrôle à une méthode de gestionnaire et la méthode de gestionnaire, basée sur l'objet d'événement, peut déduire l'événement de clic et l'objet correspondant.

Il fournit également un moyen plus propre d'ajouter plus d'arguments et d'avoir plus de flexibilité.

<button type="button"
        className="btn btn-default"
        onClick="invoke"
        name='gotoNode'
        data-arg1='1234'>GotoNode</button>

Dans la couche JavaScript :

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    // We can add more arguments as needed...
    window[nameOfFunction](arg1)
    // Hope the function is in the window.
    // Else the respective object need to be used
    })
  }

L'avantage ici est que nous pouvons avoir autant d'arguments (dans l'exemple ci-dessus, data-arg1, data-arg2, etc.) que nécessaire.

Répondu el 28 de Juillet, 2016 par Sairam Krish (493 Points )

3 votes

Je suis surpris qu'il n'y ait pas plus de votes positifs, car c'est la méthode la plus propre pour passer des arguments à un gestionnaire d'événement.

Commenté el 30 de Septembre, 2016 par Tim O'Brien

2 votes

Cela ne fonctionne pas, invoke n'est pas appelé lorsque vous cliquez sur le bouton

Commenté el 7 de Mai, 2019 par tanguy_k

0 votes

Excellente solution ! Si vous avez besoin de passer des tableaux ou des objets, utilisez simplement JSON.stringify(obj) dans le HTML et JSON.parse(event.target.getAttribute('data-arg')) dans la couche JavaScript

Commenté el 4 de Juillet, 2019 par MiXT4PE

Afficher 2 autres commentaires

Answer 4

27voto

mc10 Points 5494

Je suggère de ne même pas utiliser le HTML onclick et utiliser quelque chose de plus courant comme document.getElementById .

HTML :

<input type="button" id="nodeGoto" />

JavaScript :

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

Répondu el 10 de Mars, 2012 par mc10 (5494 Points )

2 votes

onclick n'est pas une fonction, c'est une propriété à laquelle vous devez attribuer une fonction : ....onclick = function() {...};

Commenté el 10 de Mars, 2012 par Felix Kling

0 votes

@FelixKling Merci pour cela, ma tête est encore en mode jQuery.

Commenté el 10 de Mars, 2012 par mc10

5 votes

Vous supposez qu'il n'y aura qu'une seule de ces entrées.

Commenté el 10 de Mars, 2012 par Madbreaks

Afficher 3 autres commentaires

Answer 5

21voto

zokaee hamid Points 414

Il s'agit d'une façon agréable et soignée d'envoyer une valeur ou un objet.

<!DOCTYPE html>
<html>
    <body>
        <h1  onclick="test('wow',this)">Click on this text!</h1>
        <script>
            var test = function(value,object) {
                object.innerHTML= value;
            };
        </script>
    </body>
</html>

Répondu el 30 de Octobre, 2015 par zokaee hamid (414 Points )

Answer 6

21voto

Starx Points 38727

Je suppose que vous créez un bouton en utilisant JavaScript lui-même. Donc, le bouton erreur dans votre code est que, il sera rendu dans cette forme

<input type="button" onClick="gotoNode(add)" />'

Dans l'état actuel des choses, add sera considéré comme un identifiant comme les variables ou les appels de fonction. Vous devez échapper la valeur comme ceci

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Répondu el 10 de Mars, 2012 par Starx (38727 Points )

Passer un paramètre de type chaîne de caractères dans une fonction onclick

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Passer un paramètre de type chaîne de caractères dans une fonction onclick

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: