<button type="button" data-ab-testing="{{ settings.enabletest }}" class="Cart__Checkout Button Button--primary Button--full">
<span>{{- 'cart.general.checkout' | t -}}</span>
<span class="Button__SeparatorDot"></span>
<span data-money-convertible>{{ cart.total_price | money_with_currency }}</span>
</button>
Here is a shopify button. Its like a regular button with some extra stuff thrown in to make it dynamic for templating purposes. For some reason the Javascript below, doesn't work on the button.
var addToCartButton = document.querySelector("[data-ab-testing]");
console.log(addToCartButton);
var cartForm = document.querySelector(".Drawer__Content");
addToCartButton.addEventListener("click", function(e) {
if (addToCartButton.dataset.abTesting === "true") {
console.log("true");
}
}, false);
Assuming dataset.abTesting === "true" has already been checked (and even removed completely to see if that was the issue) is there any reason that this wouldn't be firing? I have even confirmed the event listener is in fact attached to the event. Google Chrome has been problematic over the past couple days as a developer and I'm wondering if its Chrome acting up in some way. A version of this code worked on my peers computer a couple days ago and I'm at a total loss. I have tried adding an e and adding e.preventDefault() as well as removing the last false on the event listener. I'm about to name the function and add the directly to the button (onclick="funcName"), but even outside of the fact that this is not how I want to do this, I am also curious as to why this isn't working properly.
