摘要
本文旨在解决在使用 JavaScript 自定义函数向 HTML 表单字段输入数据时遇到的 Uncaught SyntaxError: Unexpected end of input 错误。通过分析问题代码，我们将提供正确的 PHP 语法，确保 JavaScript 函数能够成功调用并传递数据，从而实现动态表单填充的功能。
正文
在使用 PHP 从数据库动态生成 HTML 元素，并结合 JavaScript 函数处理用户交互时，经常会遇到引号嵌套的问题，导致 JavaScript 语法错误。本教程将以一个实际案例为例，详细讲解如何正确处理引号，避免 Uncaught SyntaxError: Unexpected end of input 错误。
问题描述
在从数据库中读取产品代码，并动态生成 HTML div 元素时，期望点击这些元素能够调用 JavaScript 函数 setProduct()，并将产品代码传递给该函数，最终将产品代码填充到 HTML 表单的 product 字段中。
立即学习“Java免费学习笔记（深入）”；
原始代码存在以下问题：
PHP 代码：
<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
$product_code = $row['product_code'];
echo '<div class="popularProduct" onclick="setProduct("'.$product_code.'")">'.$product_code.'</div>';
}
?>JavaScript 代码：
function setProduct(product) {
console.log(product);
document.getElementsByName("product")[0].value = product;
document.getElementById("addProductPanel").style.display = "none";
}生成的 HTML 代码类似于：
<div class="popularProduct" onclick="setProduct("PROD123")">PROD123</div>在 Chrome 浏览器的开发者工具中，会看到 Uncaught SyntaxError: Unexpected end of input 错误，并且 JavaScript 函数 setProduct() 没有被调用。
问题分析
问题在于 PHP 代码中使用了双引号嵌套，导致 HTML onclick 属性中的双引号提前结束。例如，onclick="setProduct("PROD123")" 被解析为 onclick="setProduct("，后面的 PROD123") 则变成了无效的 JavaScript 代码，从而引发语法错误。
解决方案
解决此问题的关键是正确处理引号的嵌套。以下是两种可行的解决方案：
方案一：使用单引号包裹 JavaScript 函数调用，并转义内部的单引号
这是最推荐的方案，因为它避免了双引号的嵌套问题。
修改后的 PHP 代码：
<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
$product_code = $row['product_code'];
echo '<div class="popularProduct" onclick="setProduct(\''.$product_code.'\')">'.$product_code.'</div>';
}
?>在这个方案中，我们使用单引号包裹 onclick 属性的值，并使用 \' 来转义产品代码中的单引号（如果存在）。这样可以确保 HTML 代码的正确性。
方案二：使用 HTML 实体编码
虽然不推荐，但可以使用 HTML 实体编码来代替双引号。
修改后的 PHP 代码：
<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
$product_code = $row['product_code'];
echo '<div class="popularProduct" onclick="setProduct("'.$product_code.'")">'.$product_code.'</div>';
}
?>在这个方案中，我们使用 " 来代替双引号。虽然可以解决问题，但代码可读性较差，不推荐使用。
验证与测试
选择上述任意一种解决方案后，重新加载页面，并点击动态生成的 div 元素。在 Chrome 浏览器的开发者工具中，应该能够看到产品代码被正确地打印到控制台中，并且 HTML 表单的 product 字段也被成功填充。
注意事项
- 务必仔细检查 PHP 代码中引号的嵌套，确保 HTML 代码的正确性。
- 使用浏览器的开发者工具可以帮助你快速定位和解决 JavaScript 错误。
- 在处理用户输入时，务必进行安全过滤，防止 XSS 攻击。
总结
通过本教程，你学习了如何解决在使用 JavaScript 自定义函数向 HTML 表单字段输入数据时遇到的 Uncaught SyntaxError: Unexpected end of input 错误。 掌握正确的引号处理方法，可以避免类似的问题，并编写出更健壮的 Web 应用程序。记住，选择单引号包裹 JavaScript 函数调用，并转义内部的单引号是最佳实践。
