这段代码中添加的按钮为啥无法响应 // 添加按钮 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 19:42:03 浏览: 19

这段代码中添加的按钮无法响应的原因是，`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> ``` 这样就可以实现五个歌单按钮靠在一起，并且根据语种不同填充不同的颜色。

相关推荐

http-echo:一个简单的HTTP请求和响应测试服务器

php常用字符串输出方法分析(echo,print,printf及sprintf) 原创

laravel-echo-module:Laravel Echo for Nuxt.js

用原神风格把这个页面美化一下<?php session_start(); if($_SESSION['username']){ echo "欢迎！{$_SESSION['username']}"; } else { echo "登录"; echo "注册"; }

php添加按钮，按钮名称为选择种类，按钮缩进100格，按钮大小为100*200

我需要一段登陆页面代码可完成前后端交互

html页面设置一个漂亮的表单，填写完毕后提交可显示所填写的信息。

php选项卡

一个可以和连接后台的音乐网站代码

用HTML+php+js+css写一个登录注册界面，php和HTML是一个项目。登录注册的界面功能齐全

用HTML，CSS，js，php，sql实现评论回复页面功能

写一个html+css+js实现的登录界面和接口

最新推荐

毕业设计MATLAB_执行一维相同大小矩阵的QR分解.zip

ipython-7.9.0.tar.gz

debugpy-1.0.0b3-cp37-cp37m-manylinux2010_x86_64.whl

libaacs-devel-0.10.0-1.mga8.i586.rpm

几个ACM算法pdf.zip

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

用Spring boot和vue写一个登录注册界面

JSBSim Reference Manual

用原神风格把这个页面美化一下<?php session_start(); if($_SESSION['username']){ echo "欢迎！{$_SESSION['username']}
"; } else { echo "登录
"; echo "注册
"; }