为什么用 Javascript 填充输入字段不起作用

Question

在我们的 magento 网站结账过程中，客户可以添加折扣代码。

这是相关的代码段：

<div class="payment-option _collapsible discount-code _active">
    <form class="form form-discount" id="discount-form">
        <div class="payment-option-inner">
            <div class="field">
                <label class="label" for="discount-code">
                    <span data-bind="i18n: 'Enter discount code'">Geben Sie den Rabatt-Code ein</span>
                </label>
                <div class="control">
                    <input class="input-text" type="text" id="discount-code" name="discount_code" placeholder="Geben Sie den Rabatt-Code ein">
                </div>
            </div>
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action action-apply" type="submit" data-bind="'value': $t('Apply Discount'), click: apply" value="Rabatt anwenden">
                    <span><span>Rabatt anwenden</span></span>
                </button>
            </div>
        </div>
    </form>
</div>

为了让我们的客户更轻松，我想将折扣代码写入本地存储并自动为他们填充折扣字段。这一切都很好。但是，当提交表单或单击按钮（通过 Javascript 或在浏览器中手动执行此操作）时，表单会返回代码无效的错误。

查看控制台，输入字段的值并没有一起发送，而是将一个空字符串传递给 Magento 进行验证。这显然会返回错误消息。

任何人都可以就我在自动设置折扣代码时遗漏的内容提供任何指导吗？ 这是脚本中的相关段落：

document.getElementById('discount-code').value = discountCode;
    
var discountSection = document.getElementsByClassName("discount-code")[0];
var discountButton = discountSection.getElementsByClassName("action-apply");
discountButton[0].click()

使用 submit() 将重新加载页面并丢失折扣代码，因此单击按钮似乎是可行的方法。我是否错过了一些需要让表单“意识到”输入已输入的过程？

Answer 1

您似乎缺少一个类为discount-code 的对象。我看到您将它用作名称和 ID，但没有使用类，因此 getElementsByClassName 将返回为空，因为该类没有任何元素。

我认为您的意思是使用 actions-toolbar 类。