I have a code that im trying to make a variable that changes if the price of the product changes hers the code:
<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").textContent
when the price changes the variable value does not change? can someone help me please! thank you.
The HTML is malformed. So, I'm not sure you mean:
A:
<h3 class="single-price">
<span class="after currency-value">
<span class="value">5000</span>
</span>
</h3>
or B:
<h3 class="single-price">
<span class="after currency-value"></span>
<span class="value">5000</span>
</h3>
So, I went with option 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, that's an enormous selector chain,
first of all, make sure your selector is correct, you can remove .textContent from the end of your js code and see if querySelector can find your element (use console.log to see what is stored in your variable)
then if the variable has undefined value, your selector is wrong if the element was selected correctly, try out innerText instead of textContent and let me know of the result
// 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>