0

Estoy tratando de crear un Array cada vez que uso el botón +:

Al pulsar el botón se crea de forma dinámica un input, una imagen sin src y un textarea concretos. Cada input se crea con un evento que, al cambiar su contenido lo lee y cambia el src de la imagen que se crea con el. Osea, que están vinculados en cierto modo.

El problema viene con que, a cada imagen, quiero añadirle un evento click que haga un push al array en cuestión del usuario que haya metido en el prompt y las coordenadas del click en la imagen.

Pero me cuesta mucho ver la lógica detrás de esto, dónde tengo que inicializar el array, cómo puedo acceder a él en el mismo click. Más adelante, cómo borrar objetos de dicho array sin alterar el resultado de los otros.

Intenté hacerlo con un forEach, pero al final lo que pasaba es que me creaba tantos eventos en el input y la imagen como veces hubiera dado al click. Por tanto, no es una opción viable a no ser que se puedan eliminar eventos si ya hay uno activo.

Dejo aquí mi ejemplo mínimo verificable, muchas gracias.

var tags_coord = [];
var rrss_publs = [];

window.addEventListener('load', () => {
  let btn = document.getElementById('addInp'),
    lnks = document.getElementById('lnks'),
    cord = document.getElementById('dv-coord');

  btn.addEventListener('click', () => {
    let lnk = document.createElement('input');
    lnk.setAttribute('id', Math.floor(Math.random() * (10000000 - 1)) + 1);
    lnk.setAttribute('name', 'link');
    lnk.setAttribute('class', 'link');
    lnk.setAttribute('type', 'text');
    lnk.setAttribute('data-coords', '');
    lnks.append(lnk);

    let img = document.createElement('img');
    img.setAttribute('class', 'photo-coord');
    img.style.width = '500px';
    img.style.height = '500px';
    let div = document.createElement('div');
    div.setAttribute('class', 'coord-txt');
    let txt = document.createElement('textarea');
    txt.setAttribute('name', 'coord-x-y');
    txt.setAttribute('class', 'xy-txt');

    cord.append(img);
    cord.append(div);
    div.append(txt);

    lnk.addEventListener('change', () => {

      img.setAttribute('src', lnk.value);
    });

    img.addEventListener('click', (e) => {

      var e_rect = e.target.getBoundingClientRect();
      let x = ((e.clientX - e_rect.x) / 500).toFixed(1);
      let y = ((e.clientY - e_rect.y) / 500).toFixed(1);
      let name = prompt('Escribe el nombre de usuario');
      let currentCoords = lnk.getAttribute('data-coords');

      if(currentCoords == ''){

          let clickCoords = {"username":name, "x":parseFloat(x), "y":parseFloat(y)};
          console.log(clickCoords);
          txt.value = JSON.stringify(clickCoords);
          lnk.setAttribute('data-coords', clickCoords);

      }else{
          

          let clickCoords = {"username":name, "x":parseFloat(x), "y":parseFloat(y)};
          let objectCoords = Object.assign({}, currentCoords, clickCoords);
          console.log(clickCoords);

          lnk.dataset.coords =  JSON.stringify(objectCoords); 
          txt.value += clickCoords;

      }
      //let instagramPage = fileGetsContent(name);
      //txt.value = JSON.stringify(ary[index]);    
    });

  });
});
<div id="lnks">
  <button id="addInp" type="button">+</button>
</div>

<div id="dv-coord">
</div>

<div id="checkseds">
  <div class="dv-seds">
    <input type="checkbox" name="fb">
    <label for="fb">Facebook</label>
  </div>

  <div class="dv-seds">
    <input type="checkbox" name="ig">
    <label for="ig">Instagram</label>
  </div>
</div>

<input id="publicar" type="submit" value="Subir">
</div>

1 respuesta 1

0

Vale hecho:

window.addEventListener('load', ()=>{
                let btn     = document.getElementById('addInp'),
                    lnks    = document.getElementById('lnks'),
                    cord    = document.getElementById('dv-coord');

                btn.addEventListener('click', ()=>{
                    let lnk = document.createElement('input');
                        lnk.setAttribute('id', Math.floor(Math.random() * (10000000 - 1)) + 1);
                        lnk.setAttribute('name', 'link');
                        lnk.setAttribute('class', 'link');
                        lnk.setAttribute('type', 'text');
                        lnk.setAttribute('data-coords' , '');
                    lnks.append(lnk);

                    let img = document.createElement('img');
                        img.setAttribute('class', 'photo-coord');
                    let div = document.createElement('div');
                        div.setAttribute('class', 'coord-txt');
                    let txt = document.createElement('textarea');
                        txt.setAttribute('name', 'coord-x-y');
                        txt.setAttribute('class', 'xy-txt');
                    
                    cord.append(img);
                    cord.append(div);
                    div.append(txt);

                    lnk.addEventListener('change',()=>{
                        img.setAttribute('src', lnk.value);  
                    });

                    let clickCoords = [];

                    img.addEventListener('click', (e)=>{

                        var e_rect = e.target.getBoundingClientRect();
                        let x = ((e.clientX - e_rect.x)/500).toFixed(1);
                        let y = ((e.clientY - e_rect.y)/500).toFixed(1);
                        let name = prompt('Escribe el nombre de usuario');
                        let currentCoords = lnk.getAttribute('data-coords');

                        if(currentCoords == ''){
                            clickCoords.push({"username":name, "x":parseFloat(x), "y":parseFloat(y)});

                            txt.value = JSON.stringify(clickCoords);
                            lnk.setAttribute('data-coords', JSON.stringify(clickCoords));
                        }else{
                            clickCoords.push({"username":name, "x":parseFloat(x), "y":parseFloat(y)});

                            txt.value = JSON.stringify(clickCoords);
                            lnk.dataset.coords = JSON.stringify(clickCoords);  
                        } 
                    });
                });
            });

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.