Javascript TypeError:处理程序未定义

我有一个带有属性的表单，我正在将其发送给JS函数。此函数在另一个JS文件中使用。当我提交表单时，我得到

TypeError:handler未定义

我对JS还是新手，但让我困惑的是，它正确地捕获了数据（如图中第一行所示），但在提交时没有正确地传递数据。以前版本的脚本是成功的，但我不得不修改方法，它不再工作了。所以我真的认为是剧本。或者可能是缺少jquery/ajax/reference？谢谢

以下是脚本：

<script>
var PLAN_CONFIG = {
  id: '',
  billing: 'annual',
  name: '',
  description: '',
  payment: '',
  panelLabel: 'Confirm',
};


$('[name=radiobtn]').click(function () {
  PLAN_CONFIG.billing = $(this).attr('value');
  console.log(PLAN_CONFIG);
});

$('#dropdown li').click(function () {
  $(".dd-button:first-child").text($(this).text());
  PLAN_CONFIG.id = $(this).attr('data-value');
  PLAN_CONFIG.name = $(this).data('name');
  PLAN_CONFIG.description = $(this).data('description');
  PLAN_CONFIG.payment = $(this).data('payment');
  console.log(PLAN_CONFIG);

});

</script>

---

注意：为了隐私，我更改了一些URL和fxn名称。另外，我其他页面上的表单引用了相同的JS文件，但它们提交成功。我觉得错误在脚本中，而不是文件中

这似乎是个时间问题。Submission.js将在触发任何DOM事件之前很久被解析。这意味着，当浏览器读取

var handler;
    if (PLAN_CONFIG['payment'] === true) {
        var handler = StripeCheckout.configure({
...

虽然声明了

handler

，但它将保持未定义状态，因为在该时间点，根据您为计划配置对象分配初始值的方式，

plan\u CONFIG['payment']

是一个空字符串，其计算结果为

false

在启动条带表单之前，您需要添加某种类型的init函数来调用，以便处理程序具有一些值。你可以用多种方法来解决这个问题

比如说

var handler; // initialize the variable
function initStripeHandler() {
    handler = StripeCheckout.configure({
        key: 'key',
        image: '/images/gavel.png',
        token: function(token) {...}
    });
}

然后，在代码的某个地方，在调用依赖于处理程序的其他函数之前，调用：

initStripeHandler();

---

尝试在

.open（）

中移动条件，而不是在

处理程序定义中移动条件

// checkout handler

// Define anyway!! Even if wrongly defined... If it doesn't run in the end, there is no problem.
var handler = StripeCheckout.configure({
  key: 'key',
  image: '/images/gavel.png',
  token: function(token) {
    /* Use the token to create the charge with a server-side script.
    You can access the token ID with `token.id`
    Pass along various parameters you get from the token response
    and your form.*/                    
    var myData = {
      billing: PLAN_CONFIG['billing'],
      token: token.id,
      email: token.email,
    };

    /* Make an AJAX post request using JQuery,
    change the first parameter to your charge script*/
    $.post("/create_subscription.php?plan=" + PLAN_CONFIG['id'], myData, function (data) {
      // if you get some results back update results
      $("#FormSubmission").hide()
      window.location.replace("http://thankyou.com");
    }).fail(function () {
      // if things fail, tell us
      window.location.replace("http://oops.com");
    })
  }
});


// .....

function launchStripeForm() {
  if (PLAN_CONFIG['payment'] === true) {    // The RUN condition should be here.
    handler.open({
      name: PLAN_CONFIG['name'],
      description: PLAN_CONFIG['description'],
      allowRememberMe: false, 
      email: $("#email").val(),
      panelLabel: PLAN_CONFIG['panelLabel'],
    });
  }
}

看起来您的变量
处理程序
从未被赋值，这就是它未定义的原因。这个赋值发生在这个if块中：
if（PLAN\u-CONFIG['payment']==true）{
。所以，我大胆猜测
PLAN\u-CONFIG['payment']
从未指定为true。这发生在您的
li
单击处理程序中，因此我猜您的付款属性在
li
上没有设置为true，或者是一个字符串
true
需要强制转换。@wholevinski在我的脚本中默认设置为true（在var PLAN\u CONFIG…payment:'true'）但是我仍然遇到同样的错误。而且，当我输出对象时，它在控制台中被定义为true。你说的强制转换是什么意思？强制转换注释是如果你将它存储为字符串
“true”
where Vs.bool
true
在您的if语句中。由于它仍然没有分配默认值，我将再看一看。即使您“强制a
true
到
PLAN\u CONFIG['payment']
…在解析代码时，
handler.open中的
处理程序
({
未定义…因此无法解析该函数…我非常确定该错误是在该特定行触发的。--我将放置条件
如果（PLAN_CONFIG['payment']===true）{
来包装开头，而不是“定义”。）@LouySpatriceBesette那么我该如何修复它呢？我是否将它包装在一个语句中，只在
handler
被填充时才执行它？但是在我附加的图片中，PLAN\u CONFIG对象的值已经按照应该的方式传递了。或者，它们是在已经太晚的时候被传递的？这些值是什么时候被传递的？这些是initi吗所有值或以后生成的值？这些值传递得比较晚，除了账单和Panelable之外，它们已经按照上面的脚本中所示进行了设置，但之前使用的是相同的变量定义。我刚刚在下拉列表中添加了三个赋值。单击函数我在回答中添加了一个示例。要检查的事项：什么或加载JS文件的顺序是什么？请确保在内联脚本之后加载
submission.JS
。此外，为了分析我看不到的可能问题，Stripe在其网站上放置了以下警告：**注意：签出必须直接从
https://checkout.stripe.com/checkout.js.
使用本地的Che副本ckout不受支持，可能会导致用户可见的错误。
// checkout handler

// Define anyway!! Even if wrongly defined... If it doesn't run in the end, there is no problem.
var handler = StripeCheckout.configure({
  key: 'key',
  image: '/images/gavel.png',
  token: function(token) {
    /* Use the token to create the charge with a server-side script.
    You can access the token ID with `token.id`
    Pass along various parameters you get from the token response
    and your form.*/                    
    var myData = {
      billing: PLAN_CONFIG['billing'],
      token: token.id,
      email: token.email,
    };

    /* Make an AJAX post request using JQuery,
    change the first parameter to your charge script*/
    $.post("/create_subscription.php?plan=" + PLAN_CONFIG['id'], myData, function (data) {
      // if you get some results back update results
      $("#FormSubmission").hide()
      window.location.replace("http://thankyou.com");
    }).fail(function () {
      // if things fail, tell us
      window.location.replace("http://oops.com");
    })
  }
});


// .....

function launchStripeForm() {
  if (PLAN_CONFIG['payment'] === true) {    // The RUN condition should be here.
    handler.open({
      name: PLAN_CONFIG['name'],
      description: PLAN_CONFIG['description'],
      allowRememberMe: false, 
      email: $("#email").val(),
      panelLabel: PLAN_CONFIG['panelLabel'],
    });
  }
}