1

Tengo este código js, que me funciona perfectamente desde la consola:

var selectorInputs = '.ywapo_conditional_variation_matched input';
var inputEnCursos = document.querySelector(selectorInputs);

inputEnCursos.addEventListener('input', function(event){
        if(!event.target.matches(selectorInputs)){
            return;
        }
    document.getElementById("input_texto3").value = inputEnCursos.value;
});

El entorno es WordPress, en una página de producto concreta, he probado:

1 - Con el código en página dentro del HTML: Cannot read property 'addEventListener' of null.

2 - Metiendo el codigo en un archivo js y cargándolo con enque scripts en wordpress: Cannot read property 'addEventListener' of null.

3 - He tratado de enverlo con window.onload y tambien con document.addEventListener: No hace nada.

NADA:

document.addEventListener('DOMContentLoaded', function() {

var selectorInputs = '.ywapo_conditional_variation_matched input';
var inputEnCursos = document.querySelector(selectorInputs);

inputEnCursos.addEventListener('input', function(event){
        if(!event.target.matches(selectorInputs)){
            return;
        }
    document.getElementById("input_texto3").value = inputEnCursos.value;
});
});

ERROR:

window.onload = function () {

var selectorInputs = '.ywapo_conditional_variation_matched input';
var inputEnCursos = document.querySelector(selectorInputs);

inputEnCursos.addEventListener('input', function(event){
        if(!event.target.matches(selectorInputs)){
            return;
        }
    document.getElementById("input_texto3").value = inputEnCursos.value;
});
};

Algo debo estar haciendo mal. ¿podrían ayudarme alguno? Muchas gracias.

10
  • No puedes agregarle un listener an selector de clase, porque cuando seleccionas clases NO te llega normalmente un unico elemento HTML si no una coleccion de elementos la cual tendras que recorrer para añadirle los eventos, de lo contrario no podras, otra opcion es que si ese es el unico elemento que tienes con esa clase entonces en vez de ponerle al elemento esa clase, haz que sea un ID.
    – Layer
    el 21 mar. 2021 a las 17:47
  • Garcias por contestar. El contesto es que existen muchos inputs, cada input tiene su id diferente, pero solo hay uno dentro de la clase css // intento capturar solo el que está dentro porque el input puede cambiar debido a otra programación. El caso es que por consola logro que funcione.
    – Rafa
    el 21 mar. 2021 a las 18:53
  • 1
    como dice @Riven, aunque sea un elemento al seleccionar por clase te va a dar un HtmlCollection que vas a tener que recorrer. ademas te sugiero que pongas el error (has puesto 2 veces el mismo codigo)
    – Christian
    el 21 mar. 2021 a las 19:46
  • Gracias @christian. Me he explicado mal el 1er código funciona solo desde la consola, el segundo no hace nada ni da error, el tercero da el error del título...... de todos modos ¿porque funciona en consola?.
    – Rafa
    el 21 mar. 2021 a las 20:16
  • lo que quieres decir es que si copias el codigo en la consola y lo ejecutas te funciona?
    – Christian
    el 21 mar. 2021 a las 20:20

1 respuesta 1

1

Muchas gracias a todos por los aportes. Al final he acabado haciéndolo funcionar cambiando el selector a la clase ywapo_input_text.

Es extraño y no se porque pasa que el selector css anterior (ywapo_conditional_variation_matched) lo puedo ver al inspeccionar con el navegador en los elementos, pero si intento verlo el código fuente de la página este selector no aparece por ningún lado.

Esto no sabía, ni que fuera posible y no me explico ¿porqué?... si alguien me puede aclarar esto lo agradecería.

window.onload = function () {
      var selectorInputs = '.ywapo_input_text';
      var inputEnCursos = document.querySelectorAll(selectorInputs);
  
  inputEnCursos.forEach(function(inputEnCurso){
  
      inputEnCurso.addEventListener('input', function(event){
          if(!event.target.matches(selectorInputs)){
            return;
          }
        document.getElementById("input_texto3").value = inputEnCurso.value;
    });
  });
} 

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.