提交表单前点击返回计数答案

【问题标题】：Return count on click before submitting form提交表单前点击返回计数
【发布时间】：2020-09-04 05:47:37
【问题描述】：

在票务页面上，我正在尝试跟踪添加到购物车的tickets 的点击量，以便我可以将值传递给 Google 跟踪代码管理器数据层。我写了以下函数：

// Increment/subtract count on user click
function updatef1a2cCounter(count) {
    var count = 0;
    $('.ticketf12c .add-amount').click(function () {
        count++;
    });
    $('ticketf12c .subtract-amount').click(function () {
        count--;
    });

    return count;
}

// Get and return current count. Push to dataLayer
$('.test-submit-button').click(function (e) {
    e.preventDefault();
    console.log(updatef1a2cCounter());

    dataLayer.push({
        'event': 'productDetail',
        'ecommerce': {
            'detail': {
                // Family tickets   
                'products': [{
                    'name': 'Ticket Type Name Goes here',
                    'id': '',
                    'price': '100.00',
                    'brand': 'Some Brand',
                    'category': 'Ticket',
                    'quantity': updatef1a2cCounter()
                }]                    
            }
        }
    });

});

当有人添加和减去项目时，我的点击事件计数器工作正常，但是当我点击提交按钮时，计数总是返回 0。有什么想法我可能在这里做错了吗？

【问题讨论】：

每次点击 $('.ticketf12c .add-amount') 时都会向 $('.ticketf12c .add-amount') 添加事件处理程序 - 然后返回 0
因为你的ticketf12c点击事件处理程序没有被触发。
您的选择器中还缺少一个点.ticketf12c .subtract-amount
@mplungjan 谢谢。眼睛累了，没看到这个！

标签： javascript jquery google-datalayer

【解决方案1】：

删除函数updatef1a2cCounter。将下面的代码移到updatef1a2cCounter 之外。并直接使用count 而不是updatef1a2cCounter()。

var count = 0;
$('.ticketf12c .add-amount').click(function () {
    count++;
});
$('.ticketf12c .subtract-amount').click(function () {
    count--;
});

下面是完整的代码。

// Increment/subtract count on user click
var count = 0;
$('.ticketf12c .add-amount').click(function() {
  count++;
});
$('.ticketf12c .subtract-amount').click(function() {
  count--;
});

// Get and return current count. Push to dataLayer
$('.test-submit-button').click(function(e) {
  e.preventDefault();
  console.log(count);

  dataLayer.push({
    'event': 'productDetail',
    'ecommerce': {
      'detail': {
        // Family tickets   
        'products': [{
          'name': 'Ticket Type Name Goes here',
          'id': '',
          'price': '100.00',
          'brand': 'Some Brand',
          'category': 'Ticket',
          'quantity': count
        }]
      }
    }
  });

});

当有人添加和减去项目时，我的点击事件计数器工作正常。

我确信您的点击事件不会起作用，除非您从其他地方致电 updatef1a2cCounter()。单击submit button 后它将开始工作。同样，正如您在 updatef1a2cCounter() 的初始行中使用 var count = 0 然后 return count; 所以它总是返回 0。

【讨论】：

但是漏掉了一个错字。 ://
@mplungjan，感谢您指出这一点。更新了答案。
我想我不应该在回答之前浪费时间评论 OP 的原始问题......

【解决方案2】：

您每次都向$('.ticketf12c .add-amount') 添加事件处理程序
单击$('.test-submit-button') - 然后您将返回您在开始时设置的0

另外，您在.ticketf12c 选择器中缺少一个点：

$('.ticketf12c .subtract-amount').click(function() {

你可能打算使用

'quantity': count

并像这样在页面加载时添加事件处理程序：

let count = 0;

$(function() { // on page load

  $('.ticketf12c .add-amount').click(function() {
    count++;
  });
  $('.ticketf12c .subtract-amount').click(function() {
    count--; // you may want to test for negative here?
  });
  // Get and return current count. Push to dataLayer
  $('.test-submit-button').click(function(e) {
    e.preventDefault();
    console.log(count);

    dataLayer.push({
      'event': 'productDetail',
      'ecommerce': {
        'detail': {
          // Family tickets   
          'products': [{
            'name': 'Ticket Type Name Goes here',
            'id': '',
            'price': '100.00',
            'brand': 'Some Brand',
            'category': 'Ticket',
            'quantity': count // no function needed
          }]
        }
      }
    });

  });
});

【讨论】：