passa il parametro stringa in una funzione onclick

225

Vorrei passare un parametro (cioè una stringa) a una funzione Onclick. Per il momento, faccio questo:

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

con result.name ad esempio uguale alla stringa "Aggiungi". Quando faccio clic su questo pulsante, ho un errore che dice che Aggiungi non è definito. Dato che questa funzione funziona perfettamente con un parametro numerico, suppongo che abbia qualcosa a che fare con i simboli "" nella stringa. Qualcuno ha avuto questo problema prima?

javascript html

— JasperTack
fonte

1

Potrebbe essere meglio in questo caso semplicemente non usare i gestori di eventi inline.

— Felix Kling

1

Il tuo problema è dovuto al fatto che la variabile non è stata salvata correttamente. Controlla la mia risposta

— Starx

351

Sembra che tu stia costruendo elementi DOM da stringhe. Devi solo aggiungere alcune virgolette intorno a result.name:

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

Dovresti davvero farlo con i metodi DOM corretti.

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

document.body.appendChild(inputElement);

Basta essere consapevoli del fatto che se si tratta di un ciclo o qualcosa del genere, resultcambierà prima che l'evento si attivi e sarà necessario creare un fumetto aggiuntivo per oscurare la variabile in evoluzione.

— david
fonte

7

Questa formattazione dei simboli funziona, quindi grazie mille

— JasperTack

2

Ciao @ David .. Ho un dubbio ... Voglio passare più argomenti in quel clic ... come è possibile? puoi rendermi utile per me ..?

— VIVEK-MDU,

2

@ David, grazie ha risolto il problema con i parametri della stringa ma ora devo passare (stringa, booleano). cosa fare per quello?

— Ha salvato Abbasi il

1

Grazie, mi ha davvero aiutato :)

— Hitesh,

2

@david: puoi dirci un po 'perché dobbiamo aggiungere un preventivo in

— proposito

34

Un paio di preoccupazioni per me riguardo all'uso della stringa escape in onClick e con l'aumentare del numero di argomenti, diventerà complicato da mantenere.

L'approccio seguente avrà un hop: Al clic, il controllo su un metodo del gestore e il metodo del gestore, basato sull'oggetto evento, può dedurre l'evento clic e l'oggetto corrispondente.

Fornisce anche un modo più pulito per aggiungere più argomenti e avere maggiore flessibilità.

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

Sul livello 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 
    })
  }

Il vantaggio qui è che possiamo avere tutti gli argomenti (nell'esempio sopra, data-arg1, data-arg2 ....), se necessario.

— Sairam Krish
fonte

2

Sono sorpreso che questo non ottenga più voti in quanto è il metodo più pulito di passare argomenti a un gestore di eventi.

— Tim O'Brien,

Questo non funziona, invokenon viene chiamato quando si fa clic sul pulsante

— tanguy_k

Ottima soluzione! Se hai bisogno di passare array o oggetti, basta usare JSON.stringify(obj)nell'HTML e JSON.parse(event.target.getAttribute('data-arg'))nel livello JavaScript

— leonheess

@SairamKrish Nel mio caso, se faccio clic sul pulsante ho impostato per visualizzare l'ID, screenshot: snag.gy/7bzEWN.jpg codice: pastiebin.com/5d35674e2fc31

— Gem

Questo potrebbe funzionare, ma è un'implementazione astrusa e atipica che sarebbe difficile seguire per un altro sviluppatore che aveva bisogno di mantenerlo.

— Spencer Sullivan,

24

Suggerisco di non usare nemmeno i onclickgestori HTML e di usare qualcosa di più comune come document.getElementById.

HTML:

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

JavaScript:

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

— kevinji
fonte

onclicknon è una funzione, è una proprietà a cui devi assegnare una funzione a:....onclick = function() {...};

— Felix Kling

@FelixKling Grazie, la mia testa è ancora in modalità jQuery.

— Kevin

4

Stai assumendo che ci sarà solo uno di questi input.

— Madbreaks

Bene, la domanda del PO implica che ci sarà un solo input.

— Kevin

Penso che questa opzione non funzioni per me, perché ho generato più pulsanti a seguito di un'operazione di ricerca. Potrei risolverlo usando un contatore per aggiungere l'id, ma voglio mantenerlo semplice e tenerlo in linea

— JasperTack

21

Immagino che tu stia creando un pulsante usando JavaScript stesso. Quindi, l' errore nel tuo codice è che, verrà visualizzato in questo modulo

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

Allo stato attuale, addverrà considerato un identificatore come variabili o chiamate di funzione. Dovresti sfuggire al valore in questo modo

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

— Starx
fonte

16

Questo è un modo carino e pulito per inviare valore o oggetto.

<!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
fonte

8

Prova questo..

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>

Nota: assicurati di inviare argomenti tra '' segni come ('a1') nel codice html

— Mawardy
fonte

Grazie!! cerco questa prob per un paio d'ore

— cweitat

Qualcuno aiuta? Nel mio caso, se fa clic sul pulsante ho impostato per visualizzare id, screenshot: snag.gy/7bzEWN.jpg Codice: pastiebin.com/5d35674e2fc31

— Gem

6

inoltre usi il simbolo di accento grave (`) nella stringa

provare :

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

per maggiori informazioni visita MDN e StackOverflow

Con Chrome, Edge, Firefox (Gecko), Opera, supporto Safari, ma non supporta Internet Explorer.

— MJ Vakili
fonte

6

se il tuo pulsante viene generato dinamicamente:

È possibile passare parametri di stringa a funzioni javascript come il codice seguente:

Ho passato 3 parametri in cui il terzo è un parametro stringa spero che questo aiuti.

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
fonte

1

Bello, pulito e semplice. Grazie

5

Modificato: se il requisito è fare riferimento all'oggetto globale (js) nel tuo codice HTML, puoi provare questo. [Non usare virgolette ('o ") attorno alla variabile]

Riferimento violino .

Javascript:

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

HTML:

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

— Sandeep GB
fonte

Ottengo un errore quando provo questa soluzione: la parte "+ result.name +" viene utilizzata come stringa in questo caso

— JasperTack

che cos'è l'oggetto "risultato"? È una variabile globale dichiarata in JS? come ... var result = {name: 'javascript'};

— Sandeep GB

risultato contiene un record della libreria jowl: è una struttura json con attributi nome, tipo, ...

— JasperTack

Jaspack, ho aggiornato la risposta. Funziona per te adesso?

— Sandeep GB

Grazie per l'esempio, ma nel mio caso non funziona: la variabile del risultato non è globale, ma è una variabile all'interno di una procedura. Quindi quando chiamo la funzione con result.name, il risultato non è noto

— JasperTack

4

Parametro multiplo:

   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
fonte

2

Per passare più parametri puoi lanciare la stringa concatenandola con il valore ASCII come, per virgolette singole possiamo usare "

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

— Signor Talha
fonte

2

Ecco una soluzione Jquery che sto usando.

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
fonte

1

Puoi passare il riferimento o il valore di stringa semplicemente inserendo la funzione all'interno delle virgole di doube "" asp sotto lo snapshot

inserisci qui la descrizione dell'immagine

— Abdul Khaliq
fonte

0

Per passare più parametri puoi lanciare la stringa concatenandola con il valore ASCII come, per virgolette singole che possiamo usare '

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

lo stesso parametro è possibile passare onclick()all'evento. Nella maggior parte dei casi funziona con tutti i browser.

— PVIJAY
fonte

0

se usare per la generazione di una serie di pulsanti con diversi parametri di gestori. 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
   }
}

se lo facciamo:

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

quindi funzione per iniziare dopo ogni pagina di aggiornamento.

se lo facciamo:

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

quindi per tutti i pulsanti creati nel loop, l'ultimo valore del parametro "nome.risultato"

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

0

se stai usando asp puoi usare 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
fonte

0

Se stai aggiungendo il pulsante o il link in modo dinamico e stai affrontando il problema, questo può essere d'aiuto. Ho risolto in questo modo.

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

Sono nuovo di HTML, JQuery e JS. Quindi potrebbe essere il mio codice non sarà ottimizzato o sintassi, ma funzionava per me.

— Avinash Verma
fonte

0

In Razor, puoi passare i parametri in modo dinamico: @ Model.UnitNameVMs [i] .UnitNameID

— Ghadir Farzaneh
fonte

0

Puoi usare questo,

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

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

funziona per me

— Agung Panduan
fonte

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

Spiega il tuo codice, questa risposta di per sé non è utile

— Phil Hudson,

-1

Quanto segue funziona molto bene per me,

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

1

OP non chiede un valore costante. Questo non risponde alla domanda.

— RubioRic,

-1

È possibile utilizzare questo codice nel metodo onclick del pulsante:

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

— Spirito della soluzione
fonte