PHP+JavaScript课程信息显示/隐藏按钮失效问题排查

核心错误：JS获取DOM元素时缺少引号 #

按钮仅能显示无法隐藏的根源是，生成的JavaScript代码中getElementById的参数未添加引号，导致JS将元素ID识别为未定义变量，无法正确获取目标DOM元素。

你当前生成的JS代码会呈现为：

function myFunction1() {
  var x = document.getElementById(showInfo1); // showInfo1被当作变量而非字符串
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

同时原代码中JS函数未闭合}，也会导致语法错误。

修复步骤 #

1. 修正JS生成逻辑
   修改PHP循环中的JS生成代码，给元素ID添加单引号，同时补全函数闭合的大括号：

<script>
<?php   
for ($t = 1; $t <= $counter; $t++) {
    $temp = 'showInfo'.$t;
    echo "function myFunction$t() {
  var x = document.getElementById('$temp');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}";
};
?>
</script>

2. 设置初始显示状态（可选）
   若希望课程信息默认隐藏，给div添加初始样式：

<div id="showInfo<?php echo $counter; ?>" style="display:none;">

3. 修复SQL注入风险
   当前SQL查询直接拼接用户输入，存在严重注入风险，改用预处理语句：

$search = $_POST['search'];
$sok = "SELECT * FROM course WHERE coursename LIKE ?"; 
$stmt = $db->prepare($sok);
$stmt->bind_param("s", "%$search%");
$stmt->execute();
$resultSearch = $stmt->get_result();

优化建议：减少代码冗余 #

避免为每个课程生成独立函数，改用通用函数：
将按钮的点击事件改为：

<button onclick="toggleInfo('showInfo<?php echo $counter; ?>')">Show/hide info</button>

然后添加一个通用JS函数：

function toggleInfo(elementId) {
  var x = document.getElementById(elementId);
  x.style.display = x.style.display === 'none' ? 'block' : 'none';
}

内容的提问来源于stack exchange，提问作者Lars Håstad Mehus