Pasar un parámetro dinámico a una función de JavaScript usando innerHTML

Tengo problemas para pasar un parámetro dinámico a una función JavaScript usando innerHTML.

A continuación se incluye el código actual que estoy usando:

var name = "test";

frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
     onclick="closeTab('+name+');">Return</button>';

Cuando depuro el código del closeTab() función, el parámetro especificado por el name variable es null.

Creo que hay un problema con la declaración del valor al modificar la propiedad innerHTML.

Cualquier ayuda sería muy apreciada.

Muchas Gracias

preguntado el 04 de julio de 12 a las 04:07

¿Quieres decir que simplemente uso el nombre de la variable sin comillas? Gracias -

usó el valor de nombre como variable, agregue comillas. -

Deberías usar DOM como document.createElement y otros en lugar de establecer innerHtml porque es más limpio -

5 Respuestas

Su declaración dinámica está pasando el parámetro como una variable, en lugar del valor del parámetro. Para corregir este problema, debe pasar el valor como una cadena, en lugar de una variable, lo que se logra encerrando y escapando la variable entre comillas simples, como se muestra a continuación:

var name = "test";

frm.innerHtml = '<button name="close"  id="close"  title="Cancel" type="button"
      onclick="closeTab(\''+name+'\');">Return</button>';

Respondido 04 Jul 12, 04:07

Usé comillas dobles que no funcionaron, mostraste que se necesita una sola \'... gj, me ayudaste - Marek Bernád

Su código resultante es:

<button ... onclick="closeTab(test);">Return</button>

¿Puedes ver lo que está mal? test se trata como una variable, cuando en realidad pretendías que fuera una cadena.

Me gusta usar JSON.stringify para hacer una variable analizable (algo así como var_export en PHP), pero en este caso también necesita escapar de las comillas. Entonces:

JSON.stringify(test).replace(/"/g,"&quot;")

Use eso en su botón en lugar de solo test.

Respondido 04 Jul 12, 04:07

Eso solo funciona porque name es una variable global, pero tan pronto como haga algo más complicado, se romperá "inexplicablemente". - Niet el oscuro Absol

Usando DOM:

var name="test";
var el = document.createElement("button");
el.name = "close";
el.id = "close";
el.title = "Cancel";
el.type = "button";
el.onclick = function() {  // an inline function that will be executed when el is clicked
    closeTab(name);        // `name` here contains `"test"`
};
frm.appendChild(el);

Realmente no animo a usar en exceso innerHTML ya que es desordenado, y en algún momento puede ser lento.

Respondido 04 Jul 12, 06:07

Suponiendo que su html es -

<form id='frm'>

</form>

Su JS debe ser -

var name = "test";
var innerHtml = "<button name='close' id='close' title='Cancel'   type='button'>Return</button>";
$("#frm").html(innerHtml);
$("#close").attr("onclick","javascript:closeTab('"+name+"');");

Mira esto - http://jsfiddle.net/arindam006/avgHz/1/

Esta es la forma más limpia de lograr esto, aunque innerHtml no es una forma adecuada de hacerlo como todos sugirieron anteriormente.

Respondido el 12 de junio de 13 a las 15:06

Simplemente usé onclick="closeTab(name);"> en innerHTML y funcionó. Supongo que ese nombre funcionó porque es una variable global.

Respondido 04 Jul 12, 04:07

El uso de name en este contexto lo pasa a la función closeTab() como una variable, no como una cadena. Idealmente, la ejecución de la función en este contexto debería recibir la cadena, no una variable global. - Robert

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.