4

Estaba haciendo esto para practicar, venía todo bien, de hecho funcionaba hasta que en los inputs donde uno ingresa la cancion, artista y tab, pongo el atributo autocomplete="off", pero lo saqué (como pueden ver en el código abajo) y sigue sin funcionar, el problema es que aparece el nuevo div, perfectamente como lo quiero, pero desaparece solo: inspecciono con las herramientas del navegador y efectivamente no está presente de ninguna manera. Por otro lado, no aparecen mensajes de error.

const btnAddItem= document.getElementById('btn-add'),
      artist= document.getElementById('input-artist'),
      song=document.getElementById('input-song'),
      modal=document.querySelector('.modal-background'),
      btnAddSong=document.getElementById('btn-add_song'),
      tab=document.getElementById('input-tabs'),
      form=document.getElementById('form');

btnAddItem.addEventListener('click',()=>{
    var newSong= song.value;
    var newArtist=artist.value;
    var newTab= tab.value;
    var newItem=document.createElement("DIV");
    newItem.innerHTML=`
    <div class="item">
        <h3 class="song">${newSong}</h3>
        <h3 class="artist">${newArtist}</h3>
        <a class="link" href="${newTab}" target="_blank" ><h3>TABS</h3></a><input type="range" />
    </div>`;
    
    document.body.appendChild(newItem);
    
    modal.style.display="none";

    form.reset();
});

btnAddSong.addEventListener('click',function(){

    modal.style.display="flex";
    
});
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Songs chart</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="title-container">
      <h3>CHART</h3>
      <button id="btn-add_song">Add</button>
    </div>
    <div class="modal-background">
      <div class="modal">
        <form id="form">
          <input type="text" id="input-song" placeholder="Song" value="" />
          <input type="text" id="input-artist" placeholder="Artist" value="" />
          <input
            type="text"
            id="input-tabs"
            placeholder="Link for TABS"
            value=""
          />
          <button id="btn-add">ADD</button>
        </form>
      </div>
    </div>
  </body>
  <script src="main.js"></script>
</html>

1
  • 2
    Si no quieres que se ejecute el form submit cuando haces click en "ADD", puedes tambien solo agregar el atributo type="button" al elemento button en el HTML, en un formulario, los botones, si no les declaras el tipo tendran por defecto el type="submit" que es el que te envia el formulario y te limpia tu resultado
    – AugustoM
    Commented el 20 dic. 2022 a las 16:33

1 respuesta 1

4

Tendrías que agregar e.preventDefault() para evitar que se recargue la página al enviar el formulario: o sea, cuando haces clic en el botón add, se crea un nuevo elemento DIV, y al no usar preventDefault(), el formulario se envía y se recarga la página, eliminando el nuevo elemento que se agregó. Tu código vendría a ser el siguiente:

const btnAddItem = document.getElementById('btn-add'),
  artist = document.getElementById('input-artist'),
  song = document.getElementById('input-song'),
  modal = document.querySelector('.modal-background'),
  btnAddSong = document.getElementById('btn-add_song'),
  tab = document.getElementById('input-tabs'),
  form = document.getElementById('form');

btnAddItem.addEventListener('click', e => {
  var newSong = song.value;
  var newArtist = artist.value;
  var newTab = tab.value;
  var newItem = document.createElement('DIV');
  newItem.innerHTML = `
    <div class="item">
        <h3 class="song">${newSong}</h3>
        <h3 class="artist">${newArtist}</h3>
        <a class="link" href="${newTab}" target="_blank" ><h3>TABS</h3></a><input type="range" />
    </div>`;

  document.body.appendChild(newItem);

  modal.style.display = 'none';

  form.reset();
  e.preventDefault();
});

btnAddSong.addEventListener('click', function () {
  modal.style.display = 'flex';
});
<body>
  <div class="title-container">
    <h3>CHART</h3>
    <button id="btn-add_song">Add</button>
  </div>
  <div class="modal-background">
    <div class="modal">
      <form id="form">
        <input type="text" id="input-song" placeholder="Song" value="" />
        <input type="text" id="input-artist" placeholder="Artist" value="" />
        <input
            type="text"
            id="input-tabs"
            placeholder="Link for TABS"
            value=""
          />
        <button id="btn-add">ADD</button>
      </form>
    </div>
  </div>
</body>

1
  • 1
    Muchísimas gracias a ambos!! Funcionan ambas opciones.
    – Nicolás
    Commented el 20 dic. 2022 a las 17:42

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.