übergeben Sie den String-Parameter in einer Onclick-Funktion
Ich möchte einen Parameter (d. H. Einen String) an eine Onclick-Funktion übergeben. Im Moment mache ich das:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
mit result.name zum Beispiel gleich string "Add" . Wenn ich auf diese Schaltfläche klicke, habe ich einen Fehler, der besagt, dass Add nicht definiert ist. Da dieser Funktionsaufruf perfekt mit einem numerischen Parameter funktioniert, gehe ich davon aus, dass er etwas mit den Symbolen "" in der Zeichenfolge zu tun hat.
Es sieht so aus, als würden Sie DOM-Elemente aus Strings erstellen. Sie müssen nur einige Anführungszeichen um result.name hinzufügen:
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Sie sollten dies jedoch mit den richtigen DOM-Methoden tun.
var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
gotoNode(result.name);
});
document.body.appendChild(inputElement);
Denken Sie nur daran, dass sich result vor dem Auslösen des Ereignisses ändert, wenn dies eine Schleife oder etwas ist, und Sie müssen eine zusätzliche Bereichsblase erstellen, um die sich ändernde Variable auszublenden.
Ich empfehle, nicht einmal HTML onclick-Handler zu verwenden, und verwende etwas üblicheres wie document.getElementById.
HTML:
<input type="button" id="nodeGoto" />
JavaScript:
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);
Für mich gibt es einige Bedenken hinsichtlich der Verwendung von String-Escape in onClick. Wenn die Anzahl der Argumente zunimmt, wird es umständlich zu pflegen.
Der folgende Ansatz hat einen One-Hop-On-Click - das Steuerelement kann zu einer Handler-Methode und einer Handler-Methode, die auf dem Ereignisobjekt basiert, das Click-Ereignis und das entsprechende Objekt abziehen.
Es bietet auch die Möglichkeit, mehr Argumente hinzuzufügen und flexibler zu sein.
<button type="button"
className="btn btn-default"
onClick="invoke"
name='gotoNode'
data-arg1='1234'>GotoNode</button>
Auf der Javascript-Ebene:
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
})
}
Der Vorteil hier ist, dass wir so viele Argumente (in obigem Beispiel data-arg1, data-arg2 ...) haben können, wie erforderlich.
Ich vermute, Sie erstellen eine Schaltfläche mit JavaScript. Der Fehler in Ihrem Code ist also so, dass er in dieser Form dargestellt wird
<input type="button" onClick="gotoNode(add)" />'
In diesem aktuellen Zustand wird add als Bezeichner wie Variablen oder Funktionsaufrufe betrachtet. Sie sollten dem Wert so entgehen
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Dies ist eine schöne und nette Art, Werte oder Objekte zu senden.
<!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>
Mehrfachparameter:
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>'
);
Versuche dies..
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>
Hinweis: Achten Sie darauf, Argumente zwischen '' Zeichen wie ('a1') im HTML-Code zu senden.
Bearbeitet: .__ Wenn die Anforderung besteht, auf das globale Objekt (js) in Ihrem HTML-Code zu verweisen, können Sie dies versuchen. [Verwenden Sie keine Anführungszeichen ('oder ") für die Variable.]
Fiddle Referenz.
Javascript:
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML:
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
wenn Ihre Schaltfläche dynamisch generiert wird:
Sie können Zeichenfolgeparameter an JavaScript-Funktionen wie im folgenden Code übergeben:
Ich habe 3 Parameter übergeben, wobei der dritte Parameter ein String-Parameter ist. Ich hoffe, das hilft.
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);
}
sie verwenden auch das Zeichen "Grave Akzent" (`) in einer Zeichenfolge
versuchen :
`<input type="button" onClick="gotoNode('${result.name}')" />`
weitere Informationen finden Sie unter MDN und Stackoverflow
Unterstützung von Chrome, Edge, Firefox (Gecko), Opera und Safari, jedoch nicht Internet Explorer.
Sie können einen Referenzwert oder einen Zeichenfolgewert übergeben, indem Sie die Funktion "" innerhalb der Anführungszeichen "" unter den Schnappschuss setzen
Um mehrere Parameter zu übergeben, können Sie die Zeichenfolge umwandeln, indem Sie sie mit dem Wert ASCII verketten. Für einfache Anführungszeichen können wir 'verwenden.
var str= "'"+ str+ "'";
wenn zur Erzeugung eines Satzes von Schaltflächen mit verschiedenen Parametern von Handlern verwendet werden . 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
}
}
wenn wir es tun:
some_button.onclick = foo( some_param );
function foo( param ){
alert( param );
}
danach kann die Funktion nach jeder Aktualisierungsseite gestartet werden.
wenn wir es tun:
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);
}
dann für alle Schaltflächen, die in der Schleife erstellt wurden, der letzte Wert des Parameters "result.name"
wenn Sie Asp verwenden, können Sie Javascript verwenden:
HTML:
<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"
Javascript:
function EditSelectedOptionName(id, name) {
console.log(id);
console.log(name);
}
Hier ist eine Jquery-Lösung, was ich verwende.
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>
Um mehrere Parameter zu übergeben, können Sie den String umwandeln, indem Sie ihn mit dem Wert ASCII verketten. Für einfache Anführungszeichen können Sie ' verwenden.
var str= "'"+ str+ "'";
derselbe Parameter, den Sie an das onclick() -Ereignis übergeben können. In den meisten Fällen funktioniert es mit jedem Browser.