es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utilizando MutationObserver para registrar cambios

17 Jun, 2023 Programación

Quiero poder registrar con console.log el precio cada vez que el precio cambie. Estoy intentando hacer esto usando MutationObserver y parece funcionar cuando se cambia el precio, se registra el precio. Pero por alguna razón siempre estoy registrando el mismo precio, es decir, el tamaño más barato. ¿Alguna idea de dónde puede estar el error?

const elementToObserve = document.querySelector(“.productItem”);
const size = document.querySelector(‘.itemSize’);
const observer = new MutationObserver(function() {
console.log(size.innerHTML);
});

observer.observe(elementToObserve, {
subtree: true,
childList: true
});

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema en este caso es que el elemento size no está cambiando cuando el precio cambia. Por lo tanto, aunque el precio esté cambiando, la declaración console.log sigue registrando el mismo valor size.innerHTML cada vez.

    Para solucionarlo, necesitarás encontrar el elemento que contiene el valor del precio y observar sus mutaciones en su lugar. Una vez que hayas identificado el elemento que contiene el precio, puedes usar MutationObserver para escuchar los cambios en su valor y luego registrar el nuevo precio cada vez que cambie.

    Código de ejemplo:

    const priceElement = document.querySelector('.productPrice'); // Encuentra el elemento que contiene el valor del precio
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(priceElement.innerHTML); // Registra el nuevo precio cada vez que cambie
  });
});

observer.observe(priceElement, {
  subtree: true,
  childList: true,
  characterData: true
}); // Observa las mutaciones del elemento de precio

    En este código, estamos utilizando el método querySelector para encontrar el elemento que contiene el valor del precio y luego configurando un MutationObserver para escuchar los cambios en ese elemento. Cada vez que cambia el valor del elemento, la declaración console.log dentro de la función observadora registrará el nuevo valor del precio.

Comments are closed.