2

mi primer pregunta, que nervios!, básicamente estoy tratando de que cada vez que se seleccione el signo de "+" aparezca otro numero en las opciones dentro del contenedor select, ahora solo estoy tratando de seleccionar la opción de + pero la consola dice "TypeError: Cannot read property 'addEventListener' of null" cuando busco la función en consola sale null, ya intente con otros selectores y pasa lo mismo

function addAnaquel() {
  select.appendChild("option").innerHtml= "2";
}

var id = document.querySelector(".id")
var masanaquel = document.getElementById("anamas")
var select = document.getElementsByTagName("select")[0]

masanaquel.addEventListener("click", addAnaquel)


    </script>
  </head>
  <body>
    <form class="databox" action="index.html" method="post">
      <label for="">Numero de pieza: </label><input type="number" name="" class="pieza" id="pie" value="">
        <label for="">Descripcion: </label><input type="text" class="descripcion" name="" value="">
      <label for="">Implemento/Tractor: </label><input type="text" class="type" name="" value="">
      <label for="">Precio: </label><input type="text" name="" value="" class="price">
      <label for="">Cantidad: </label><input type="text" name="" value="" class="cantidad">
      <label for="">Anaquel: </label><select class="select" name="anaquel">
        <option value="">1</option>
        <option id="anamas" value="">+</option>
0

2 respuestas 2

3

Si tu código real está en el mismo orden que el expuesto en la pregunta, la razón es simple: Cuando el código javascript se ejecuta, el HTML que intentas modificar con ese código no existe todavía. Los navegadores procesan el HTML en el orden el que está escrito, con lo que es aconsejable poner las etiquetas <script> al final del body, justo antes de cerrarlo con </body>.

Otra opción no excluyente es asegurarte de que tu código no se ejecuta antes de tiempo, encapsulando tódo tu código en una función y haciendo que esta función se ejecute al terminar de cargar el documento:

function main () {

  //todo tu código aquí, anidando funciones
}

document.addEventListener("DOMContentLoaded", main);
1

Prueba a poner tu código así:

$(document).ready(function(){
function addAnaquel() {
  select.appendChild("option").innerHtml= "2";
}

var id = document.querySelector(".id")
var masanaquel = document.getElementById("anamas")
var select = document.getElementsByTagName("select")[0]

masanaquel.addEventListener("click", addAnaquel)
});
2
  • Sería bueno indicarle al OP que aunque en una parte mínima pero estás usando JQuery
    – user128299
    el 23 dic. 2020 a las 7:29
  • ademas de decirle al que pregunta que esta haciendo mal, para que el y los demas aprendan el 23 dic. 2020 a las 12:14

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.