Übergeben Sie den String-Parameter in einer Onclick-Funktion

225

Ich möchte einen Parameter (dh eine Zeichenfolge) 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, wird ein Fehler angezeigt, der besagt, dass Hinzufügen nicht definiert ist. Da dieser Funktionsaufruf mit einem numerischen Parameter perfekt funktioniert, gehe ich davon aus, dass er etwas mit den Symbolen "" in der Zeichenfolge zu tun hat. Hatte jemand dieses Problem schon einmal?

javascript html JasperTack
quelle

1

In diesem Fall ist es möglicherweise besser, keine Inline-Ereignishandler zu verwenden.

Felix Kling

1

Ihr Problem ist darauf zurückzuführen, dass die Variable nicht ordnungsgemäß maskiert wird. Überprüfen Sie meine Antwort

Starx

351

Es sieht so aus, als würden Sie DOM-Elemente aus Zeichenfolgen erstellen. Sie müssen nur einige Anführungszeichen um result.name hinzufügen:

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

Sie sollten dies jedoch wirklich 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);

Beachten Sie jedoch, dass sich eine Schleife oder etwas resultanderes ändert, bevor das Ereignis ausgelöst wird, und dass Sie eine zusätzliche Bereichsblase erstellen müssen, um die sich ändernde Variable zu schattieren.

David
quelle

7

Diese Formatierung der Symbole funktioniert, also vielen Dank

JasperTack

2

Hi @ david..Ich habe einen Zweifel ... Ich möchte mehrere Argumente in diesem Onclick übergeben..wie ist das möglich? kannst du mir nützlich machen ..?

VIVEK-MDU

2

@ David, danke, es hat mein String-Parameter-Problem gelöst, aber jetzt muss ich übergeben (String, Boolean). was dafür zu tun?

Zaveed Abbasi

1

Danke, es hat mir wirklich geholfen :)

Hitesh

2

@ David: Kannst du ein bisschen sagen, warum wir ein Zitat hinzufügen müssen

Hitesh

34

Einige Bedenken hinsichtlich der Verwendung von String-Escape in onClick und mit zunehmender Anzahl von Argumenten wird die Wartung umständlich.

Der folgende Ansatz hat einen One-Hop-On-Click - Übertragen Sie das Steuerelement auf eine Handler-Methode, und die Handler-Methode kann basierend auf dem Ereignisobjekt das Klickereignis und das entsprechende Objekt abziehen.

Es bietet auch eine sauberere Möglichkeit, mehr Argumente hinzuzufügen und mehr Flexibilität zu haben.

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

Auf 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 hierbei ist, dass wir so viele Argumente haben können (im obigen Beispiel data-arg1, data-arg2 ....) wie nötig.

Sairam Krish
quelle

2

Ich bin überrascht, dass dies nicht mehr positive Stimmen bringt, da es die sauberere Methode ist, Argumente an einen Ereignishandler zu übergeben.

Tim O'Brien

Dies funktioniert nicht, invokewird nicht aufgerufen, wenn Sie auf die Schaltfläche klicken

tanguy_k

Tolle Lösung! Wenn Sie Arrays oder Objekte übergeben müssen, verwenden Sie diese einfach JSON.stringify(obj)im HTML und JSON.parse(event.target.getAttribute('data-arg'))in der JavaScript-Ebene

leonheess

@SairamKrish In meinem Fall, wenn ich auf die Schaltfläche klicke, die ich eingestellt habe, um ID anzuzeigen, Screenshot: snag.gy/7bzEWN.jpg Code: pastiebin.com/5d35674e2fc31

Gem

Dies mag funktionieren, aber es ist eine abstruse, atypische Implementierung, die für einen anderen Entwickler, der dies beibehalten musste, schwer zu befolgen wäre.

Spencer Sullivan

24

Ich schlage vor, nicht einmal HTML- onclickHandler zu verwenden und etwas häufigeres zu verwenden, wie z document.getElementById.

HTML:

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

JavaScript:

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

Kevinji
quelle

onclickist keine Funktion, es ist eine Eigenschaft, der Sie eine Funktion zuweisen müssen:....onclick = function() {...};

Felix Kling

@FelixKling Danke dafür, mein Kopf ist immer noch im jQuery-Modus.

Kevinji

4

Sie gehen davon aus, dass es nur einen dieser Eingänge gibt.

Madbreaks

Nun, die Frage des OP impliziert, dass es nur eine Eingabe geben wird.

Kevinji

Ich denke, diese Option funktioniert bei mir nicht, da ich als Ergebnis einer Suchoperation mehrere Schaltflächen generiere. Ich könnte dies lösen, indem ich einen Zähler verwende, um die

IDs

21

Ich vermute, Sie erstellen eine Schaltfläche mit JavaScript. Der Fehler in Ihrem Code ist also, dass er in dieser Form gerendert wird

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

In diesem aktuellen Zustand addwird als Bezeichner wie Variablen oder Funktionsaufrufe betrachtet. Sie sollten dem Wert so entkommen

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

Starx
quelle

16

Dies ist eine schöne und übersichtliche Möglichkeit, 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>

Zokaee Hamid
quelle

8

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: Stellen Sie sicher, dass Sie Argumente zwischen '' Zeichen wie ('a1') im HTML-Code senden

Mawardy
quelle

Vielen Dank!! Ich habe nach diesem Prob für ein paar Stunden gesucht

am

Hilft jemand? In meinem Fall, wenn ich auf die Schaltfläche klicke, die ich eingestellt habe, um ID anzuzeigen, Screenshot: snag.gy/7bzEWN.jpg Code: pastiebin.com/5d35674e2fc31

Gem

6

Außerdem verwenden Sie das Grabakzent-Symbol (`) in der Zeichenfolge

Versuchen :

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

Weitere Informationen finden Sie unter MDN und Stackoverflow

Von Chrome, Edge, Firefox (Gecko), Opera, Safari unterstützt, aber nicht Internet Explorer.

MJ Vakili
quelle

6

Wenn Ihre Schaltfläche dynamisch generiert wird:

Sie können Zeichenfolgenparameter an Javascript-Funktionen wie den folgenden Code übergeben:

Ich habe 3 Parameter übergeben, wobei der dritte 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);
}

MJVM
quelle

1

Schön, sauber und einfach. Danke

5

Bearbeitet: Wenn Sie auf das globale Objekt (js) in Ihrem HTML-Code verweisen möchten, können Sie dies versuchen. [Verwenden Sie keine Anführungszeichen ('oder ") um die Variable]

Geigenreferenz .

Javascript:

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

HTML:

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

Sandeep GB
quelle

Ich erhalte eine Fehlermeldung, wenn ich diese Lösung versuche: Der Teil "+ result.name +" wird in diesem Fall als Zeichenfolge verwendet

JasperTack

Was ist ein "Ergebnis" -Objekt? Ist es eine globale Variable, die in JS deklariert ist? wie ... var result = {name: 'javascript'};

Sandeep GB

Ergebnis enthält einen Datensatz aus der Jowl-Bibliothek: Es ist eine JSON-Struktur mit Attributen Name, Typ, ...

JasperTack

Jaspack, ich habe die Antwort aktualisiert. Funktioniert es jetzt für Sie?

Sandeep GB

Vielen Dank für das Beispiel, aber das funktioniert in meinem Fall nicht: Die Ergebnisvariable ist nicht global, sondern eine Variable innerhalb einer Prozedur. Wenn ich also die Funktion mit result.name aufrufe, ist das Ergebnis nicht bekannt

JasperTack

4

Mehrere Parameter:

   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
quelle

2

Um mehrere Parameter zu übergeben, können Sie die Zeichenfolge umwandeln, indem Sie sie mit dem ASCII-Wert verketten. Für einfache Anführungszeichen können wir '

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

Herr Talha
quelle

2

Hier ist eine Jquery-Lösung, die 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">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

DamianToczek
quelle

1

Sie können eine Aktualisierung oder einen Zeichenfolgenwert übergeben, indem Sie die Funktion einfach in die Doube-Kommas "" asp unterhalb des Schnappschusses einfügen

Geben Sie hier die Bildbeschreibung ein

Abdul Khaliq
quelle

0

Zum Übergeben mehrerer Parameter können Sie die Zeichenfolge umwandeln, indem Sie sie mit dem ASCII-Wert verketten, z. B. für einfache Anführungszeichen '

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

Der gleiche Parameter kann an das onclick()Ereignis übergeben werden. In den meisten Fällen funktioniert er mit jedem Browser.

PVIJAY
quelle

0

wenn für die Erzeugung eines Satzes von Schaltflächen mit verschiedenen Parametern von Handlern verwendet werden soll. 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 );
}

dann startet die Funktion foo nach jeder Aktualisierungsseite.

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 in der Schleife erstellten Schaltflächen der letzte Wert des Parameters "result.name"

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

0

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);
 }

Abdullah Tahan
quelle

0

Wenn Sie eine Schaltfläche oder einen Link dynamisch hinzufügen und sich dem Problem stellen, kann dies hilfreich sein. Ich habe auf diese Weise gelöst.

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

Ich bin neu in HTML, JQuery und JS. Vielleicht wird mein Code nicht optimiert oder die Syntax wird nicht angezeigt, aber es hat bei mir funktioniert.

Avinash Verma
quelle

0

In Razor können Sie Parameter dynamisch übergeben: @ Model.UnitNameVMs [i] .UnitNameID

Ghadir Farzaneh
quelle

0

Sie können dies verwenden,

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

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

seine Arbeit für mich

Agung Panduan
quelle

-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
quelle

Bitte erläutern Sie Ihren Code, diese Antwort allein ist nicht nützlich

Phil Hudson

-1

Folgendes funktioniert bei mir sehr gut,

<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
quelle

1

OP fragt nicht nach einem konstanten Wert. Dies beantwortet die Frage nicht.

RubioRic

-1

Sie können diesen Code in Ihrer Button-On-Click-Methode verwenden:

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

Lösungsgeist
quelle

Übergeben Sie den String-Parameter in einer Onclick-Funktion

Antworten: