2

Tengo el siguiente problema, necesito hacer una macrosustitución con javascript, se trata de rellenar dinámicamente las opciones de un navbar, las opciones están en un array y mientras se recorre el array voy creando un <a>, asignándole las clases y también tengo que asignarle la función que debe ejecutar al hacer click.

El código es el siguiente:

var opts = [
    "Op1",
    "Op2",
    "Op3"];

for (let i = 0; i < opts.length; i++) {
    let mnu = document.getElementById("mnu");
    let opt = document.createElement("a");
    opt.href = "#";
    opt.className += "list-group-item ";
    opt.className += "list-group-item-action";
    opt.onclick = opts[1]; //este es el punto
    opt.innerHTML = opts[i];
    mnu.appendChild(opt);
}

function Op1() {
    CargaImagenes("Op1", 30);
}

function Op2() {
    CargaImagenes("Op2", 20);
}

function Op3() {
    CargaImagenes("Op3", 50);
}
5
  • Y qué problemas tienes? Commented el 28 oct. 2019 a las 16:45
  • Que no funciona
    – Federico
    Commented el 28 oct. 2019 a las 16:55
  • Osea el onclick no funciona?
    – MitaCloud
    Commented el 28 oct. 2019 a las 16:57
  • No funciona debido a que opts[1] tiene por valor el string "Op2". No contiene ninguna instrucción. opt.onclick = eval(opts[1]) funciona? Commented el 28 oct. 2019 a las 16:58
  • Creo que a lo que se refiere es que por cada elemento se llame la funcion utilizando ese elemento, es decir si opts[0] = Op1, opts[1] = Op2 y etc... Utilizando por supuesto el for.
    – MitaCloud
    Commented el 28 oct. 2019 a las 17:01

3 respuestas 3

2

Simplemente tendrías que agregar la función como anónima y listo, de esa forma tendrías una función por cada link.

var opts = ['Op1', 'Op2', 'Op3']

for (let i = 0; i < opts.length; i++) {
  let mnu = document.getElementById('mnu')
  let opt = document.createElement('a')
  opt.href = '#'
  opt.className += 'list-group-item '
  opt.className += 'list-group-item-action'
  opt.onclick = function () {
    alert(opts[i])
  }
  opt.innerHTML = opts[i]
  mnu.appendChild(opt)
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <nav id="mnu">

    </nav>
    <script src="./app.js"></script>
</body>

</html>

2
  • Realmente lo que debe hacer no es ejecutar un alert dentro de la función, sino que cada función op1, op2, op3, ejecuta otra función que muestra las imágenes contenidas en la carpeta que se pasa como parámetro ("op1", "op2", "op3") y el número de imágenes que contiene la carpeta.
    – Federico
    Commented el 28 oct. 2019 a las 17:30
  • Funciona !!!! Muchas gracias.
    – Federico
    Commented el 28 oct. 2019 a las 18:00
2

Tu código puede quedar tal cual como está, con una ligera variación

    opt.onclick = this[opts[1]]; //este es el punto

Aquí estarías tomando como una variable la función a ejecutar, para esto tienes que utilizar la palabra reservada this que apunta al conjunto de elementos que has definido en tu documento.

Con esto tu código final quedaría así

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="mnu"></div>

    <script>
      var opts = ["Op1", "Op2", "Op3"];

      for (let i = 0; i < opts.length; i++) {
        let mnu = document.getElementById("mnu");
        let opt = document.createElement("a");
        opt.href = "#";
        opt.className += "list-group-item ";
        opt.className += "list-group-item-action";
        opt.onclick = this[opts[1]]; //este es el punto
        opt.innerHTML = opts[i];
        mnu.appendChild(opt);
      }

      function Op1() {
        alert("Op1");
      }

      function Op2() {
        alert("Op2");
      }

      function Op3() {
        alert("Op3");
      }
    </script>
  </body>
</html>

2

Te voy a proponder una solucíon muy facil y rapida, pero se tiene que cumplir dos condiciones:

  1. Declarar las funciones en el contexto global.
  2. Los nombres de la función se deben llamar igual que los nombres de cada elemento del array.

var opts = [
    "Op1",
    "Op2",
    "Op3"];


function Op1() {
    alert("Op1");
}

function Op2() {
    alert("Op2");
}

function Op3() {
    alert("Op3");
}




for (let i = 0; i < opts.length; i++) {
    let mnu = document.getElementById("mnu");
    let opt = document.createElement("a");
    opt.href = "#";
    opt.className += "list-group-item ";
    opt.className += "list-group-item-action";
    opt.onclick = window[opts[i]] //Aqui es donde se llama la funcion utilizando el nombre
    opt.innerHTML = opts[i];
    mnu.appendChild(opt);
}
<div id="mnu"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.