passer le paramètre de chaîne dans une fonction onclick

225

Je voudrais passer un paramètre (c'est-à-dire une chaîne) à une fonction Onclick. Pour le moment, je fais ceci:

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

avec result.name par exemple égal à la chaîne "Ajouter". Lorsque je clique sur ce bouton, j'ai une erreur qui indique que Ajouter n'est pas défini. Puisque cet appel de fonction fonctionne parfaitement avec un paramètre numérique, je suppose qu'il a quelque chose à voir avec les symboles "" dans la chaîne. Quelqu'un a-t-il déjà eu ce problème?

javascript html JasperTack
la source

1

Il pourrait être préférable dans ce cas de simplement ne pas utiliser de gestionnaires d'événements en ligne.

Felix Kling

1

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

Starx

351

Il semble que vous construisez des éléments DOM à partir de chaînes. Il vous suffit d'ajouter quelques guillemets autour de result.name:

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

Vous devriez vraiment faire cela avec des méthodes DOM appropriées.

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

document.body.appendChild(inputElement);

Sachez simplement que s'il s'agit d'une boucle ou de quelque chose, resultcela changera avant le déclenchement de l'événement et vous devrez créer une bulle de portée supplémentaire pour masquer la variable changeante.

David
la source

7

Cette mise en forme des symboles fonctionne, alors merci beaucoup

JasperTack

2

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

VIVEK-MDU

2

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

Zaveed Abbasi

1

Merci, ça m'a vraiment aidé :)

Hitesh

2

@david: pouvez-vous nous expliquer pourquoi nous devons ajouter une citation à ce sujet

Hitesh

34

Quelques préoccupations pour moi en ce qui concerne l'utilisation de l'échappement de chaîne dans onClick et à mesure que le nombre d'arguments augmente, cela deviendra difficile à gérer.

L'approche suivante aura un saut - Au clic - prenez le contrôle d'une méthode de gestionnaire et une méthode de gestionnaire, basée sur l'objet événement, peut déduire l'événement 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>

Sur la couche javascript:

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    //We can add more args as needed...
    window[nameOfFunction](arg1) 
    //hope function is in 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 ....) que nécessaire.

Sairam Krish
la source

2

Je suis surpris que cela n'obtienne pas plus de votes positifs car c'est la méthode la plus propre de passer des arguments à un gestionnaire d'événements.

Tim O'Brien

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

tanguy_k

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

leonheess

@SairamKrish Dans mon cas, si je clique sur le bouton i ai réglé sur id écran, capture d' écran: snag.gy/7bzEWN.jpg code: pastiebin.com/5d35674e2fc31

Gem

Cela peut fonctionner, mais c'est une implémentation abstruse et atypique qui serait difficile à suivre pour un autre développeur qui devait le maintenir.

Spencer Sullivan

24

Je suggère même de ne pas utiliser de onclickgestionnaires HTML et d'utiliser quelque chose de plus commun tel que document.getElementById.

HTML:

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

JavaScript:

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

kevinji
la source

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

Felix Kling

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

kevinji

4

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

Madbreaks

Eh bien, la question du PO implique qu'il n'y aura qu'une seule entrée.

kevinji

Je pense que cette option ne fonctionne pas pour moi, car je génère plusieurs boutons à la suite d'une opération de recherche. Je pourrais résoudre ce problème en utilisant un compteur pour ajouter aux identifiants, mais je veux rester simple et le garder en ligne

JasperTack

21

Je suppose que vous créez un bouton en utilisant JavaScript lui-même. Donc, l' erreur dans votre code est que, il se présentera sous cette forme

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

A cet état actuel, addsera considéré comme un identifiant comme les variables ou les appels de fonction. Vous devez échapper à la valeur comme celle-ci

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

Starx
la source

16

C'est une manière agréable et ordonnée d'envoyer de la 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>

zokaee hamid
la source

8

Essaye ça..

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button>

JavaScript:

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";   
    }
</script>

Remarque: assurez-vous d'envoyer des arguments entre les signes '' comme ('a1') dans le code html

Mawardy
la source

Merci!! cherchait ce problème depuis quelques heures

cweitat

Quelqu'un vous aide-t-il? Dans mon cas, si je clique sur le bouton i ai réglé sur id écran, capture d' écran: snag.gy/7bzEWN.jpg code: pastiebin.com/5d35674e2fc31

Gem

6

vous utilisez également le symbole d'accent grave (`) dans la chaîne

essayez:

`<input type="button" onClick="gotoNode('${result.name}')" />`

pour plus d'informations, visitez MDN et Stackoverflow

Par Chrome, Edge, Firefox (Gecko), Opera, Safari, mais pas Internet Explorer.

MJ Vakili
la source

6

si votre bouton est généré dynamiquement:

Vous pouvez passer des paramètres de chaîne aux fonctions javascript comme le code ci-dessous:

J'ai passé 3 paramètres où le troisième est un paramètre de chaîne j'espère que cela aide.

var btn ="<input type='button' onclick='RoomIsReadyFunc("+ID+","+RefId+",\""+YourString+"\");'  value='Room is Ready' />";

//your javascript function

function RoomIsReadyFunc(ID, RefId, YourString)
{
  alert(ID);
  alert(RefId);
  alert(YourString);
}

MJVM
la source

1

Agréable, propre et simple. Merci

5

Modifié: Si l'exigence est de référencer l'objet global (js) dans votre code HTML, vous pouvez essayer ceci. [N'utilisez pas de guillemets ('ou ") autour de la variable]

ViolonRéférence de .

Javascript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />

Sandeep GB
la source

J'obtiens une erreur lorsque j'essaie cette solution: la partie "+ result.name +" est utilisée comme chaîne dans ce cas

JasperTack

qu'est-ce qu'un objet "résultat"? Est-ce une variable globale déclarée en JS? comme ... var result = {name: 'javascript'};

Sandeep GB

résultat contient un enregistrement de la bibliothèque jowl: c'est une structure json avec le nom des attributs, le type, ...

JasperTack

Jaspack, j'ai mis à jour la réponse. Ça marche pour vous maintenant?

Sandeep GB

Merci pour l'exemple, mais cela ne fonctionne pas dans mon cas: la variable de résultat n'est pas globale, mais est une variable dans une procédure. Donc, quand j'appelle la fonction avec result.name, le résultat n'est pas connu

JasperTack

4

Paramètre multiple:

   bounds.extend(marker.position);
        bindInfoWindow(marker, map, infowindow,
     '<b>' + response[i].driver_name + '</b><br>' + 
     '<b>' +moment(response[i].updated_at).fromNow() + '</b>
      <button onclick="myFunction(\''+response[i].id+'\',\''+driversList+'\')">Click   me</button>'
    );

Zahid Rahman
la source

2

Pour passer plusieurs paramètres, vous pouvez convertir la chaîne en la concaténant avec la valeur ASCII comme, pour les guillemets simples, nous pouvons utiliser '

var str= "&#39;"+ str+ "&#39;";

Mr Talha
la source

2

Voici une solution Jquery que j'utilise.

Jquery

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

HTML

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

DamianToczek
la source

1

Vous pouvez passer la réfrence ou la valeur de chaîne juste mettre la fonction dans les virgules "" asp ci-dessous l'instantané

entrez la description de l'image ici

Abdul Khaliq
la source

0

Pour passer plusieurs paramètres, vous pouvez convertir la chaîne en la concaténant avec la valeur ASCII comme, pour les guillemets simples, nous pouvons utiliser '

var str= "&#39;"+ str+ "&#39;";

le même paramètre que vous pouvez passer à l' onclick()événement.Dans la plupart des cas, il fonctionne avec tous les navigateurs.

PVIJAY
la source

0

si à utiliser pour la génération d'un ensemble de boutons avec différents paramètres de gestionnaires. https://www.w3schools.com/js/js_function_closures.asp

let some_button = document.createElement( "button" );
some_button.type = "button";

some_button.onclick = doWithParam( some_param );

function doWithParam( param ){
   return function(){
      alert( param );//<------Your code here
   }
}

si nous faisons:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

puis fonction foo start après chaque page de mise à jour.

si nous faisons:

for( let i = 0; i < 10; ++i ){
    var inputElement = document.createElement('input');
    inputElement.type = "button"
    inputElement.addEventListener('click', function(){
        gotoNode(result.name);
    });

   document.body.appendChild(inputElement);
}

puis pour tous les boutons créés dans la boucle, la dernière valeur du paramètre "result.name"

Александр Боярчук
la source

0

si vous utilisez asp, vous pouvez utiliser javascript:

HTML:

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

Javascript:

function EditSelectedOptionName(id, name) {
        console.log(id);
        console.log(name);
 }

Abdullah Tahan
la source

0

Si vous ajoutez un bouton ou un lien dynamiquement et que vous rencontrez le problème, cela peut être utile. J'ai résolu de cette façon.

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

Je suis nouveau sur HTML, JQuery et JS. Il se peut donc que mon code ne soit pas optimisé ni sa syntaxe, mais cela fonctionnait pour moi.

Avinash Verma
la source

0

Dans Razor, vous pouvez passer des paramètres de manière dynamique: @ Model.UnitNameVMs [i] .UnitNameID

Ghadir Farzaneh
la source

0

Vous pouvez l'utiliser,

'<input id="test" type="button" value="' + result.name + '" />'

$(document)..on('click', "#test", function () {
        alert($(this).val());
});

son travail pour moi

Agung Panduan
la source

-1

    <style type="text/css">
        #userprofile{
              display: inline-block;
              padding: 15px 25px;
              font-size: 24px;
              cursor: pointer;
              text-align: center;
              text-decoration: none;
              outline: none;
              color: #fff;
              background-color: #4CAF50; //#c32836
              border: none;
              border-radius: 15px;
              box-shadow: 0 9px #999;
              width: 200px;
              margin-bottom: 15px;

        }
        #userprofile:hover {
            background-color: #3e8e41
        }
        #userprofile:active {
              background-color: #3e8e41;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
        }
        #array {
                border-radius: 15px 50px;
                background: #4a21ad;
                padding: 20px;
                width: 200px;
                height: 900px;
                overflow-y: auto;
            }

    </style>
if(data[i].socketid!=""){
$("#array").append("<button type='button'  id='userprofile' class='green_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");                    
                }else{
                    console.log('null socketid  >>', $("#userprofile").css('background-color')); 
                    //$("#userprofile").css('background-color','#c32836 ! important');


$("#array").append("<button type='button'  id='userprofile' class='red_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");  
                $(".red_button").css('background-color','#c32836');             
                }

Jay Jariwala
la source

Veuillez expliquer votre code, cette réponse en elle-même n'est pas utile

Phil Hudson

-1

Ce qui suit fonctionne très bien pour moi,

<html>
<head>
    <title>HTML Form</title>
</head>
<body>
    <form>
        <input type="button" value="ON" onclick="msg('ON')">
        <input type="button" value="OFF" onclick="msg('OFF')">
    </form>
    <script>
        function msg(x){
            alert(x);
        }
    </script>
</body>
</html>

Sayan Shankhari
la source

1

OP ne demande pas une valeur constante. Cela ne répond pas à la question.

RubioRic

-1

Vous pouvez utiliser ce code dans la méthode onclick de votre bouton:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

Esprit de solution
la source

passer le paramètre de chaîne dans une fonction onclick

Réponses: