paramètre de chaîne de passage dans une fonction onclick
Je souhaite passer un paramètre (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 "Add" . Lorsque je clique sur ce bouton, un message d'erreur indique que Add n'est pas défini. Puisque cette fonction fonctionne parfaitement avec un paramètre numérique, je suppose qu’elle a quelque chose à voir avec les symboles "" dans la chaîne . Quelqu'un at-il déjà eu ce problème?
On dirait que vous construisez des éléments DOM à partir de chaînes. Il vous suffit d’ajouter des guillemets autour de result.name:
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Cependant, vous devriez vraiment faire cela 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);
Sachez simplement que s'il s'agit d'une boucle ou d'un autre élément, result changera avant le déclenchement de l'événement et vous devrez créer une bulle d'étendue supplémentaire pour masquer la variable en cours de modification.
Je suggère même de ne pas utiliser les gestionnaires HTML onclick et d'utiliser quelque chose de plus courant, tel que document.getElementById.
HTML:
<input type="button" id="nodeGoto" />
JavaScript:
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);
Quelques préoccupations pour moi en ce qui concerne l'utilisation de string escape dans onClick et, à mesure que le nombre d'arguments augmente, il devient difficile à maintenir.
L'approche suivante aura un clic sur un clic - amenez le contrôle sur une méthode de gestion et méthode, basée sur l'objet événement, peut déduire l'événement click et l'objet correspondant.
Il fournit également un moyen plus simple 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 ...) selon les besoins.
Je devine, vous créez un bouton en utilisant JavaScript lui-même. Donc, le erreur dans votre code est celui, il sera rendu sous cette forme
<input type="button" onClick="gotoNode(add)" />'
À cet état actuel, add sera considéré comme un identifiant comme les variables ou les appels de fonction. Vous devriez échapper à la valeur comme celle-ci
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
C'est une manière agréable et soigné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>
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>'
);
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 '' tels que ('a1') dans le code html
Modifié: Si l'exigence consiste à 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]
Fiddle référence.
Javascript:
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML:
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
si votre bouton est généré dynamiquement:
Vous pouvez passer des paramètres de chaîne à des fonctions javascript comme ci-dessous:
J'ai passé 3 paramètres, le troisième étant un paramètre de chaîne, j'espère que cela aidera.
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);
}
aussi vous utilisez le symbole 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.
Vous pouvez passer une référence ou une valeur de chaîne en plaçant simplement une fonction entre "" asp sous l'instantané
Pour transmettre plusieurs paramètres, vous pouvez transtyper la chaîne en la concaténant avec la valeur ASCII, comme pour les guillemets simples, nous pouvons utiliser '
var str= "'"+ str+ "'";
si utiliser pour générer 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"
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);
}
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">❮</button>
<button class="right" value="next">❯</button>
</div>
Pour transmettre plusieurs paramètres, vous pouvez transtyper la chaîne en la concaténant avec la valeur ASCII. Par exemple, vous pouvez utiliser ' pour les guillemets simples.
var str= "'"+ str+ "'";
le même paramètre que vous pouvez transmettre à l'événement onclick(). Dans la plupart des cas, il fonctionne avec tous les navigateurs.