pasar parámetro de cadena en una función onclick

225

Me gustaría pasar un parámetro (es decir, una cadena) a una función Onclick. Por el momento, hago esto:

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

con result.name por ejemplo igual a la cadena "Agregar". Cuando hago clic en este botón, aparece un error que dice que Agregar no está definido. Como esta función funciona perfectamente con un parámetro numérico, supongo que tiene algo que ver con los símbolos "" en la cadena. ¿Alguien tuvo este problema antes?

javascript html JasperTack
fuente
1
En este caso, podría ser mejor no utilizar simplemente controladores de eventos en línea.
Felix Kling
1
Su problema se debe a que la variable no se escapó correctamente. Comprueba mi respuesta
Starx

Respuestas:

351

Parece que estás creando elementos DOM a partir de cadenas. Solo necesita agregar algunas citas alrededor de result.name:

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

Sin embargo, realmente debería estar haciendo esto con los métodos DOM adecuados.

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

​document.body.appendChild(inputElement);​

Solo tenga en cuenta que si esto es un bucle o algo así, resultcambiará antes de que se active el evento y necesitaría crear una burbuja de alcance adicional para sombrear la variable cambiante.

david
fuente
77
Este formato de los símbolos funciona, así que muchas gracias
JasperTack
2
Hola @ David ... Tengo una duda ... Quiero pasar varios argumentos en ese clic ... ¿cómo es posible? puedes hacerme útil ...?
VIVEK-MDU
2
@ David, gracias, resolvió el problema de mi parámetro de cadena, pero ahora tengo que pasar (cadena, booleano). que hacer para eso
Zaveed Abbasi
1
Gracias, realmente me ayudó :)
Hitesh
2
@david: ¿puedes decir un poco por qué necesitamos agregar una cita al respecto?
Hitesh
34

Un par de preocupaciones para mí con respecto al uso de escape de cadena en onClick y a medida que aumenta el número de argumentos, será difícil de mantener.

El siguiente enfoque tendrá un salto: Al hacer clic, lleve el control a un método de controlador y el método de controlador, basado en el objeto de evento, puede deducir el evento de clic y el objeto correspondiente.

También proporciona una forma más limpia de agregar más argumentos y tener más flexibilidad.

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

En la capa de 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 
    })
  }

La ventaja aquí es que podemos tener tantos argumentos (en el ejemplo anterior, data-arg1, data-arg2 ...) como sea necesario.

Sairam Krish
fuente
2
Me sorprende que esto no obtenga más votos positivos, ya que es el método más limpio de pasar argumentos a un controlador de eventos.
Tim O'Brien
Esto no funciona, invokeno se llama cuando hace clic en el botón
tanguy_k
Gran solución! Si necesita pasar matrices u objetos, simplemente utilícelos JSON.stringify(obj)en el HTML y JSON.parse(event.target.getAttribute('data-arg'))en la capa de JavaScript
leonheess el
@SairamKrish En mi caso, si hago clic en el botón que configuré para mostrar la identificación, captura de pantalla: snag.gy/7bzEWN.jpg código: pastiebin.com/5d35674e2fc31
Gema
Esto puede funcionar, pero es una implementación abstrusa y atípica que sería difícil de seguir para otro desarrollador que necesitara mantener esto.
Spencer Sullivan
24

Sugiero ni siquiera usar onclickcontroladores HTML , y usar algo más común como document.getElementById.

HTML:

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

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);
kevinji
fuente
onclickno es una función, es una propiedad a la que debe asignar una función:....onclick = function() {...};
Felix Kling
@FelixKling Gracias por eso, mi cabeza todavía está en modo jQuery.
kevinji
44
Estás asumiendo que solo habrá una de estas entradas.
Madbreaks
Bueno, la pregunta del OP implica que solo habrá una entrada.
kevinji
Creo que esta opción no funciona para mí, porque genero múltiples botones como resultado de una operación de búsqueda. Podría resolver esto usando un contador para agregar a la identificación, pero quiero mantenerlo simple y mantenerlo en línea
JasperTack
21

Supongo que estás creando un botón usando el propio JavaScript. Entonces, el error en su código es que, se representará de esta forma

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

En este estado actual, addse considerará como un identificador como variables o llamadas a funciones. Deberías escapar del valor así

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

Esta es una forma agradable y ordenada de enviar valor u objeto.

<!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
fuente
8

Prueba esto..

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: asegúrese de enviar argumentos entre '' signos como ('a1') en código html

Mawardy
fuente
¡¡Gracias!! He estado buscando este problema durante un par de horas
cweitat
¿Alguien ayuda? En mi caso, si hago clic en el botón que configuré para mostrar la identificación, captura de pantalla: snag.gy/7bzEWN.jpg código: pastiebin.com/5d35674e2fc31
Gem
6

también usas el símbolo de acento grave (`) en una cadena

tratar :

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

Para obtener más información, visite MDN y Stackoverflow

Por Chrome, Edge, Firefox (Gecko), Opera, Safari, pero no es compatible con Internet Explorer.

MJ Vakili
fuente
6

si su botón se genera dinámicamente:

Puede pasar parámetros de cadena a funciones de JavaScript como el siguiente código:

Pasé 3 parámetros donde el tercero es un parámetro de cadena espero que esto ayude.

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
fuente
1
Agradable, limpio y simple. Gracias
5

Editado: si el requisito es hacer referencia al objeto global (js) en su código HTML, puede intentarlo. [No use comillas ('o ") alrededor de la variable]

Referencia de violín .

Javascript:

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

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />​
Sandeep GB
fuente
Recibo un error cuando intento esta solución: la parte "+ result.name +" se usa como cadena en este caso
JasperTack
¿Qué es el objeto "resultado"? ¿Es una variable global declarada en JS? como ... var result = {name: 'javascript'};
Sandeep GB
El resultado contiene un registro de la biblioteca jowl: es una estructura json con atributos nombre, tipo, ...
JasperTack
Jaspack, he actualizado la respuesta. ¿Funciona para ti ahora?
Sandeep GB
Gracias por el ejemplo, pero eso no funciona en mi caso: la variable de resultado no es global, pero es una variable dentro de un procedimiento. Entonces, cuando llamo a la función con result.name, el resultado no se conoce
JasperTack
4

Parámetro Múltiple: 

   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
fuente
2

Para pasar múltiples parámetros, puede convertir la cadena concatenando con el valor ASCII como, para comillas simples podemos usar '

var str= "&#39;"+ str+ "&#39;";
Señor talha
fuente
2

Aquí hay una solución de Jquery que estoy 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
fuente
1

Puede pasar el valor de referencia o cadena simplemente coloque la función dentro de las "" comas doube debajo de la instantánea

ingrese la descripción de la imagen aquí

Abdul Khaliq
fuente
0

Para pasar múltiples parámetros, puede convertir la cadena concatenando con el valor ASCII como, para comillas simples podemos usar &#39;

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

el mismo parámetro que puede pasar al onclick()evento. En la mayoría de los casos, funciona con todos los navegadores.

PVIJAY
fuente
0

si se usa para generar un conjunto de botones con diferentes parámetros de controladores. 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 lo hacemos:

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

luego la función foo comienza después de cada página de actualización.

si lo hacemos:

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

luego, para todos los botones creados en el bucle, el último valor del parámetro "result.name"

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

si está usando asp puede usar 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
fuente
0

Si está agregando un botón o un enlace dinámicamente y enfrenta el problema, entonces esto puede ser de ayuda. Lo resolví de esta manera.

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

Soy nuevo en HTML, JQuery y JS. Por lo tanto, puede que mi código no esté optimizado o sintaxis, pero estaba funcionando para mí.

Avinash Verma
fuente
0

En Razor, puede pasar parámetros dinámicamente: @ Model.UnitNameVMs [i] .UnitNameID

Ghadir Farzaneh
fuente
0

Puedes usar esto,

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

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

es trabajo para mi

Agung Panduan
fuente
-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
fuente
Por favor, explique su código, esta respuesta por sí sola no es útil
Phil Hudson
-1

Lo siguiente me funciona muy bien,

<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
fuente
1
OP no pregunta por un valor constante. Esto no responde la pregunta.
RubioRic
-1

Puede usar este código en el método de hacer clic en el botón:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
Espíritu de solución
fuente