这段代码中添加的按钮为啥无法响应 // 添加按钮 echo "<div style='padding-left: 100px;'> <button style='width: 100px; height: 40px;' onclick='selectCategory(()'>选择种类</button> </div>"; <script> function selectCategory(() { // 获取选中的二级分类 var subcategory = document.querySelector('input[name="subcategory"]:checked'); if (subcategory) { // 跳转到另一个页面 window.location.href = "second_redsources.php?subcategory=" + subcategory.value; } else { alert("请选择种类"); } } </script>。请帮忙分析原因,并给出解决方法
时间: 2024-03-23 14:42:03 浏览: 170
这段代码中添加的按钮无法响应的原因是,`onclick` 属性中的函数名 `selectCategory` 后面的括号多了一个 `(`,导致 JavaScript 解析错误,无法正确绑定事件。应该将代码修改如下:
```php
// 添加按钮
echo "<div style='padding-left: 100px;'>
<button style='width: 100px; height: 40px;' onclick='selectCategory()'>选择种类</button>
</div>";
```
即将 `onclick` 属性中的函数名 `selectCategory` 后面的括号 `()` 放在函数名后面,去掉多余的 `(`。
另外,由于该按钮的作用是获取选中的二级分类并跳转到另一个页面,因此需要确保页面中存在名为 `subcategory` 的单选框,并且设置了相应的值。如果页面中没有该单选框,或者该单选框的 `name` 属性不为 `subcategory`,则会导致 JavaScript 获取不到选中的值,从而无法响应。
相关问题
<?php // 连接数据库 $conn = new mysqli("localhost", "root", "123456", "wyya"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 查询数据 $tables = array("one_list", "two_list", "three_list", "four_list", "five_list"); $data = array(); foreach ($tables as $table) { $sql = "SELECT * FROM " . $table; $result = mysqli_query($conn, $sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $row['语种'] = substr($table, 0, -5); // 获取语种名称 $data[] = $row; } } } // 渲染 HTML 模板 ?> <!DOCTYPE html> <html> <head> <title>网易云音乐歌单</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; } .language-button { background-color: #f2f2f2; padding: 8px 16px; border: none; cursor: pointer; display: inline-block; margin-right: 10px; } .chinese { color: #e60000; } .english { color: #0066cc; } .japanese { color: #ff9900; } .korean { color: #3385ff; } .cantonese { color: #009933; } </style> </head> <body> <div> <h2>网易云音乐歌单</h2> <div> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[0]; ?>"> <button type="submit" class="language-button chinese">华语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[1]; ?>"> <button type="submit" class="language-button english">英语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[2]; ?>"> <button type="submit" class="language-button japanese">日语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[3]; ?>"> <button type="submit" class="language-button korean">韩语</button> </form> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $tables[4]; ?>"> <button type="submit" class="language-button cantonese">粤语</button> </form> </div> </div> <?php if (!empty($data)) { ?> <table> <tbody> <tr> <th>歌单名</th> <th>歌单地址</th> <th>歌曲量</th> <th>播放量</th> <th>收藏量</th> <th>评论量</th> <th>分享量</th> <th>创建者</th> <th>创建时间</th> </tr> <?php foreach ($data as $row) { ?> <tr> <td><?php echo $row['歌单名']; ?></td> <td><a href="<?php echo $row['歌单地址']; ?>" target="_blank"><?php echo $row['歌单地址']; ?></a></td> <td><?php echo $row['歌曲量']; ?></td> <td><?php echo $row['播放量']; ?></td> <td><?php echo $row['收藏量']; ?></td> <td><?php echo $row['评论量']; ?></td> <td><?php echo $row['分享量']; ?></td> <td><?php echo $row['创建者']; ?></td> <td><?php echo $row['创建时间']; ?></td> </tr> <?php } ?> </tbody> </table> <?php } else { ?> <p>暂无数据</p> <?php } ?> </body> </html> <?php // 关闭连接 $conn->close()0>修改代码,通过点击按钮展示出对应的单个歌单
好的,您可以将代码修改为以下内容:
```php
<?php
// 连接数据库
$conn = new mysqli("localhost", "root", "123456", "wyya");
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$tables = array("one_list", "two_list", "three_list", "four_list", "five_list");
$current_table = isset($_GET['table']) ? $_GET['table'] : $tables[0]; // 获取当前语种
// 查询数据
$sql = "SELECT * FROM " . $current_table;
$result = mysqli_query($conn, $sql);
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$row['语种'] = substr($current_table, 0, -5); // 获取语种名称
$data[] = $row;
}
}
// 渲染 HTML 模板
?>
<!DOCTYPE html>
<html>
<head>
<title>网易云音乐歌单</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
.language-button {
background-color: #f2f2f2;
padding: 8px 16px;
border: none;
cursor: pointer;
display: inline-block;
margin-right: 10px;
}
.chinese {
color: #e60000;
}
.english {
color: #0066cc;
}
.japanese {
color: #ff9900;
}
.korean {
color: #3385ff;
}
.cantonese {
color: #009933;
}
</style>
</head>
<body>
<div>
<h2>网易云音乐歌单</h2>
<div>
<?php foreach ($tables as $table) { ?>
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $table; ?>">
<button type="submit" class="language-button <?php echo substr($table, 0, -5); ?>" <?php echo $table == $current_table ? 'disabled' : ''; ?>><?php echo substr($table, 0, -5); ?></button>
</form>
<?php } ?>
</div>
</div>
<?php if (!empty($data)) { ?>
<table>
<tbody>
<tr>
<th>歌单名</th>
<th>歌单地址</th>
<th>歌曲量</th>
<th>播放量</th>
<th>收藏量</th>
<th>评论量</th>
<th>分享量</th>
<th>创建者</th>
<th>创建时间</th>
</tr>
<?php foreach ($data as $row) { ?>
<tr>
<td><?php echo $row['歌单名']; ?></td>
<td><a href="<?php echo $row['歌单地址']; ?>" target="_blank"><?php echo $row['歌单地址']; ?></a></td>
<td><?php echo $row['歌曲量']; ?></td>
<td><?php echo $row['播放量']; ?></td>
<td><?php echo $row['收藏量']; ?></td>
<td><?php echo $row['评论量']; ?></td>
<td><?php echo $row['分享量']; ?></td>
<td><?php echo $row['创建者']; ?></td>
<td><?php echo $row['创建时间']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php } else { ?>
<p>暂无数据</p>
<?php } ?>
</body>
</html>
<?php
// 关闭连接
$conn->close();
?>
```
修改后,您可以点击对应语种的按钮,展示出该语种对应的单个歌单。
<?php // 连接数据库 $conn = new mysqli("localhost", "root", "123456", "wyya"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 查询五个歌单的表 $tables = array(); $result = mysqli_query($conn, "SHOW TABLES LIKE '%_list'"); if ($result->num_rows > 0) { while ($row = mysqli_fetch_array($result)) { $tables[] = $row[0]; } } // 将歌单中包含的语种代码替换成对应的语种名称 function getLanguageName($languageCode) { switch($languageCode) { case "one": return "华语"; case "two": return "欧美"; case "three": return "日语"; case "four": return "韩语"; case "five": return "粤语"; default: return ""; } } // 获取选中的歌单表 $tableName = isset($_GET["table"]) ? $_GET["table"] : ""; $data = array(); if (!empty($tableName)) { $result = mysqli_query($conn, "SELECT * FROM $tableName"); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $row["language"] = getLanguageName($row["language"]); $data[] = $row; } } } ?> <!DOCTYPE html> <html> <head> <title>网易云音乐歌单</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <h2>网易云音乐歌单</h2> <div> <div style="display:flex; justify-content:space-between;"> <?php foreach ($tables as $table) { ?> <form method="get" action=""> <input type="hidden" name="table" value="<?php echo $table; ?>"> <button type="submit" style="margin-right:10px;"> <?php echo getLanguageName(str_replace("_list", "", $table)); ?> </button> </form> <?php } ?> </div> </div> <?php if (!empty($tableName)) { ?> <table> <tbody> <tr> <?php $columns = mysqli_query($conn, "SHOW COLUMNS FROM $tableName"); if ($columns->num_rows > 0) { while ($column = mysqli_fetch_array($columns)) { ?> <th><?php echo $column["Field"]; ?></th> <?php } } ?> </tr> <?php foreach ($data as $row) { ?> <tr> <?php foreach ($row as $value) { ?> <td><?php echo $value; ?></td> <?php } ?> </tr> <?php } ?> </tbody> </table> <?php } ?> <?php // 关闭连接 $conn->close(); ?> </body> </html>修改代码,使五个按钮靠在一起,并适当增大每个按钮,将华语按钮填充为红色,将欧美按钮填充为蓝色,将日语按钮填充为黄色,将韩语按钮填充为粉色,将粤语按钮填充为紫色
可以将样式部分的代码修改如下:
```
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* 新增部分样式 */
.language-button {
background-color: white;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
width: 100px;
}
.language-button.chinese {
background-color: red;
color: white;
}
.language-button.western {
background-color: blue;
color: white;
}
.language-button.japanese {
background-color: yellow;
color: black;
}
.language-button.korean {
background-color: pink;
color: black;
}
.language-button.cantonese {
background-color: purple;
color: white;
}
</style>
```
然后将歌单按钮部分的代码修改如下:
```
<div>
<div style="display:flex; justify-content:space-between;">
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $tables[0]; ?>">
<button type="submit" class="language-button chinese">华语</button>
</form>
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $tables[1]; ?>">
<button type="submit" class="language-button western">欧美</button>
</form>
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $tables[2]; ?>">
<button type="submit" class="language-button japanese">日语</button>
</form>
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $tables[3]; ?>">
<button type="submit" class="language-button korean">韩语</button>
</form>
<form method="get" action="">
<input type="hidden" name="table" value="<?php echo $tables[4]; ?>">
<button type="submit" class="language-button cantonese">粤语</button>
</form>
</div>
</div>
```
这样就可以实现五个歌单按钮靠在一起,并且根据语种不同填充不同的颜色。
阅读全文