Pasar un parámetro de cadena en una función onclick
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 "Agregar no está definido" . Dado que esta llamada a función funciona perfectamente con un parámetro numérico, supongo que tiene algo que ver con los símbolos "" en la cadena.
¿Como puedo solucionar este problema?
Parece que estás creando elementos DOM a partir de cadenas. Sólo necesita agregar algunas comillas alrededor de result.name:
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Sin embargo, realmente deberías hacer esto con 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 se trata de un bucle o algo así, resultcambiará antes de que se active el evento y necesitará crear una burbuja de alcance adicional para sombrear la variable cambiante.
Tengo un par de preocupaciones con respecto al uso de escape de cadenas en onClick y, a medida que crece el número de argumentos, será complicado de mantener.
El siguiente enfoque tendrá un salto: al hacer clic, llevará el control a un método de controlador y el método de controlador, según 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 arguments as needed...
window[nameOfFunction](arg1)
// Hope the function is in the 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, etc.) como sea necesario.
