0

Estoy haciendo un listado en javascript y html, no consigo solventar el ese error.

var formPeliculas = document.querySelector("#formularioP");
formPeliculas.addEventListener('submit', function(){
var input = document.querySelector("#addmovie").value;
if (input.length >= 1) {
  localStorage.setItem(input, input);

}
});

for(var i in localStorage){
  console.log(localStorage[i]);
if(typeOf(localStorage[i]) == 'string') {
  var movList = document.querySelector("#peliculasList");
    var li = document.createELement("li");
    li.append(localStorage[i]);
    movList.append(li);
  }

}
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Base de datos de peliculas</h1>
    <h2>Añade tu pelicula:</h2>
    <form class="" action="" id="#formularioP">
      <input type="text" id="addmovie"/>
      <button type="submit">Guardar</button>
    </form>
    <div class="" id="peliculas">
      <h2>Peliculas</h2>
      <ul id="peliculasList">

      </ul>
    </div>
  </body>
  <script src="ls.js" charset="utf-8" type="text/javascript"></script>
</html>

A ver si alguien con más experiencia (estoy aprendiendo poco a poco por mi cuenta) puede ayudarme, gracias.

3
  • Creo que debes evitar el comportamiento por defecto con event.preventDefault() el 24 jul. 2018 a las 21:33
  • @JoelIbaceta podrías explicar eso?
    – devtinoco
    el 24 jul. 2018 a las 21:35
  • Un formulario tiene un evento submit que por defecto envia todo el contenido al destino definido en la propiedad action, si lo que quieres es añadir funcionalidad antes de eso, debes prevenir o evitar que se envite el formulario hasta que ... se cumplan tus condiciones, para eso se usa preventDefault el 24 jul. 2018 a las 21:36

2 respuestas 2

0

En lugar de usar querySelector, utiliza getElementById:

var formPeliculas = document.getElementById("#formularioP");
formPeliculas.addEventListener('submit', function(){
var input = document.querySelector("#addmovie").value;
if (input.length >= 1) {
  localStorage.setItem(input, input);

}
});

for(var i in localStorage){
  console.log(localStorage[i]);
if(typeOf(localStorage[i]) == 'string') {
  var movList = document.querySelector("#peliculasList");
    var li = document.createElement("li");
    li.append(localStorage[i]);
    movList.append(li);
  }

}
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Base de datos de peliculas</h1>
    <h2>Añade tu pelicula:</h2>
    <form class="" action="" id="#formularioP">
      <input type="text" id="addmovie"/>
      <button type="submit">Guardar</button>
    </form>
    <div class="" id="peliculas">
      <h2>Peliculas</h2>
      <ul id="peliculasList">

      </ul>
    </div>
  </body>
  <script src="ls.js" charset="utf-8" type="text/javascript"></script>
</html>

3
  • Con el getElementById he solucionado el error de la línea 2 pero ahora tengo otro error en la línea 13: Uncaught TypeError: document.createELement is not a function
    – devtinoco
    el 24 jul. 2018 a las 21:44
  • Tienes un typo. Tienes la L mayuscula en createELement
    – alanfcm
    el 24 jul. 2018 a las 21:47
  • Oh... gracias por tener tanta paciencia
    – devtinoco
    el 24 jul. 2018 a las 21:48
0

var formPeliculas = document.getElementById("#formularioP");
formPeliculas.addEventListener('submit', function(){
var input = document.querySelector("#addmovie").value;
if (input.length >= 1) {
  localStorage.setItem(input, input);

}
});

for(var i in localStorage){
  console.log(localStorage[i]);
if(typeOf(localStorage[i]) == 'string') {
  var movList = document.querySelector("#peliculasList");
    var li = document.createElement("li");
    li.append(localStorage[i]);
    movList.append(li);
  }

}
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Base de datos de peliculas</h1>
    <h2>Añade tu pelicula:</h2>
    <form class="" action="" id="#formularioP">
      <input type="text" id="addmovie"/>
      <button type="submit">Guardar</button>
    </form>
    <div class="" id="peliculas">
      <h2>Peliculas</h2>
      <ul id="peliculasList">

      </ul>
    </div>
  </body>
  <script src="ls.js" charset="utf-8" type="text/javascript"></script>
</html>

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.