是否仍然可以使用外部Javascript/jquery文件检测Shopify中的变体更改？

我编写了一个外部JS脚本，在stores产品的页面上显示自定义文本。目前在window.onload函数中只调用一次JS函数

<script id="testscript" src="https://example.com/test.js?amount=${{ product.price | divided_by: 100.00 | round: 2 }}"></script>
<div id="mydiv"></div>

My code in test.js:
window.onload = function () {
    document.getElementById("mydiv").innerHTML += ("<p>This is a test.</p>");
};

我希望我的脚本能够检测到变体更改，并在选择不同变体时将文本切换到不同的变体。如何仅使用JS/jQuery函数在外部JS文件中检测变量更改并获取其价格

<script id="testscript" src="https://example.com/test.js?amount=${{ product.price | divided_by: 100.00 | round: 2 }}"></script>
<div id="mydiv"></div>

My code in test.js:
window.onload = function () {
    document.getElementById("mydiv").innerHTML += ("<p>This is a test.</p>");
};

test.js中的我的代码：
window.onload=函数（）{
document.getElementById（“mydiv”）.innerHTML+=（“这是一个测试。
”）；
};

这取决于主题结构的外观。假设您使用的是首个主题：

您需要在负责变量更改的页面元素上设置事件侦听器。在上面的页面上，它是一个选择，允许客户更改项目大小

如果打开页面检查器并预览网站代码，“选择元素”具有以下结构：

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">                    
    <option value="13”" selected="selected">13”</option>
    <option value="15”">15”</option>
</select>

或将侦听器绑定到元素：

document.getElementById("SingleOptionSelector-0").addEventListener("change", detectChange(this));

---

这取决于主题结构的外观。假设您使用的是首个主题：

您需要在负责变量更改的页面元素上设置事件侦听器。在上面的页面上，它是一个选择，允许客户更改项目大小

如果打开页面检查器并预览网站代码，“选择元素”具有以下结构：

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">                    
    <option value="13”" selected="selected">13”</option>
    <option value="15”">15”</option>
</select>

或将侦听器绑定到元素：

document.getElementById("SingleOptionSelector-0").addEventListener("change", detectChange(this));