The property 'addEventListener' can not be read with a null submit

Question

The property 'addEventListener' can not be read with a null submit

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm doing a list in javascript and html, I can not solve the 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>

Let's see if someone with more experience (I'm learning little by little on my own) can help me, thank you.

javascript

asked by devtinoco 24.07.2018 в 23:32

source

2 answers

Duplicate a row of a table in my database - Ruby on rails When I see my page in the browser google chrome my background image is not seen?

score 0 · Answer 1

Instead of using querySelector , use 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>

score 0 · Answer 2

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>