Tengo un código que estoy tratando de hacer una variable que cambia si el precio del producto cambia el código de ella:
<h3 class="single-price"><span class="after currency-value"><span class="value">5000</span></h3> var price_aft = document.querySelector("#app > main > div > div > div.container > div > div.product-details > div.product-section.price-section > h3 > span.after.currency-value > span.value").textContentcuando el precio cambia el valor de la variable no cambia? ¡Puede alguien ayudarme por favor! gracias.
El HTML está mal formado. Entonces, no estoy seguro de que quieras decir:
A:
<h3 class="single-price"> <span class="after currency-value"> <span class="value">5000</span> </span> </h3>o B:
<h3 class="single-price"> <span class="after currency-value"></span> <span class="value">5000</span> </h3>Entonces, fui con la opción A:
let selector = ".single-price .after .value"; let priceAft = document.querySelector(selector); console.log(priceAft.innerHTML); <h3 class="single-price"> <span class="after currency-value"> <span class="value">5000</span> </span> </h3>WOW, esa es una enorme cadena selectora,
en primer lugar, asegúrese de que su selector sea correcto, puede eliminar .textContent del final de su código js y ver si querySelector puede encontrar su elemento (use console.log para ver qué está almacenado en su variable)
luego, si la variable tiene un valor indefinido, su selector es incorrecto si el elemento se seleccionó correctamente, pruebe innerText en lugar de textContent y hágame saber el resultado
// select span var target = document.getElementById('value'); var currValue = ''; // create observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log("event trigger " + mutation.target.id); }); }); // pass what to listen var config = { attributes: true, childList: true, characterData: true }; // pass span node and config observer.observe(target, config); // simulate the Change of the text value of span function onValueChange() { currValue = target.textContent; console.log(currValue); } setTimeout(onValueChange, 2000); <h3 class="single-price"><span class="after currency-value"><span id="value" class="value">5000</span></h3>