将数字从HTML传递到JS函数，在JS中变成“未定义”。为什么？

Question

下面是PHP和HTML：

<?php $rowCountInDataTable=600; ?>
...
<button onclick="<?php echo "showNextRows($rowCountInDataTable)"; ?>"></button>;

这是JS：

function showNextRows(totalRowCount) {
    alert("button clicked");//check
    alert("Total row count: " . totalRowCount);//check
    console.log("Total row count: " . totalRowCount);//check
    ...
}

undefined.打印alert和console.log问题是为什么？如何在JS中获得正确的值，即600。

Answer 1

与PHP不同，在JavaSript中，级联操作符是+，而不是.，正如您所写的。

将点改为加法。即：

alert("Total row count: " + totalRowCount); //check

Answer 2

您可以采用这种方法，只需将行计数指定为按钮上的一个数据属性，然后在单击按钮时使用jQuery来获取它。

PHP/HTML：

<?php $rowCountInDataTable=600; ?>
...
<button class="row-count-button" data-row-count="<?= $rowCountInDataTable ?>"></button>

Javascript：

$('button.row-count-button').on('click', function() {
    var totalRowCount = $(this).data('row-count-button');
    alert("button clicked");//check
    alert("Total row count: " + totalRowCount);//check
    console.log("Total row count: " + totalRowCount);//check
});