I'm encountering an issue on my Wordpress site where products with variations are not displaying the inner text on a certain element, despite the fact that the text is present when I inspect the element. Here's the code:
const makerBtn = document.getElementById("maker-button");
const sku = document.getElementsByClassName("sku");
const newLink = document.createElement("a");
newLink.innerText = "Buy at Maker's Site";
newLink.className += "fusion-button button-flat fusion-button-default-size button-custom button-3 fusion-button-default-span fusion-button-default-type";
newLink.addEventListener("click", ()=> {
newLink.target = "_blank";
newLink.href = sku[0].innerHTML.toString();
});
makerBtn.appendChild(newLink);
I've added URLs to some products in the sku and if they exist, clicking the button will take you to a new site. However, I'm trying to find a way to hide the button if there is no sku. If I use this code:
if (sku[0].innerHTML === "") {
newLink.style.display = "none";
}
It works, but it also hides the button for products with variations because their sku[0].innerHTML appears as an empty string even though the console log shows the URL is present.
I'm struggling to identify which property of these variable products can be used in a conditional statement to differentiate their behavior. Any assistance would be greatly appreciated. Thank you!