无法读取未定义的属性“拆分”(调试问题)

时间:2021-04-08 19:05:45

标签: javascript html

我很难找出以下错误:

Uncaught TypeError: Cannot read property 'split' of undefined

HTML:

<div id="content" class="col-xs-12 col-sm-12">
            
                <p>Please select your preferred payment method.</p>
            <div class="radio">
            <label>
                                                        <input type="radio" name="payment_method" value="authorizenet" checked="checked">
                                Credit Card/Debit Card (Authorize.Net)                            </label>
        </div>
            <div class="radio">
            <label>
                                    <input type="radio" name="payment_method" value="affirm">
                                Credit Card/Debit Card (Affirm)                            </label>
        </div>
    <p><strong>Add comments about your order.</strong></p>
<p>
    <textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
    <div class="cart-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <h4 for="input-coupon">Coupon Code</h4>
                    <div class="input-group">
                        <input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
                        <span class="input-group-btn">
                            <input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <h4 for="input-voucher">Gift Certificate Code</h4>
                    <div class="input-group">
                        <input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
                        <span class="input-group-btn">
                            <input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="buttons">
        <div class="pull-right">I have read and agree to the <a href="https://hhtruckaccessories.com?route=information%2Finformation%2Fagree&amp;information_id=5" class="agree"><b>Shipping and Returns</b></a>.                            <input type="checkbox" name="agree" value="1">
                        &nbsp;
            <input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
        </div>
    </div>

脚本:

var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;

selector.html(line);

目标:

我在结帐页面上有两个单选按钮。

  1. 信用卡/借记卡 (Authorize.Net)
  2. 信用卡/借记卡(确认)

我无法直接编辑 HTML。因此用上面的代码重建 html 行来给我我想要的输出。我正在尝试将第二个无线电输入的 HTML 文本更改为“确认”。

脚本在小提琴中有效,但在页面上无效。

1 个答案:

答案 0 :(得分:0)

我曾经在尝试维护页面而无法访问源文件时遇到了类似的错误。我正在使用 jQuery 尝试删除一个 p 元素句子,但结果未定义,因为它在应用程序生成那部分 html 之前就在主页上运行。这是一个SPA。我通过将文档上的侦听器添加到路由器来修复它,如下所示:$(document).on("pageshow", "#checkoutPage", function() {//your jquery function});


我在 CodePen 和本地使用 VS Code 都进行了尝试,两次都达到了预期的效果。您是否尝试过确保您使用的是正确版本的 JQuery 并且以正确的顺序链接到 html,还可以通过控制台日志进行调试?见下文:

CodePen

enter code here

Screenshot