点击Kingdom按钮生成Phylum子按钮功能失效技术求助

我帮你排查了代码里的几个关键问题，咱们一步步来修复：

1. 先修正脚本引入的低级错误 #

你的HTML里错误地把当前HTML文件（Page.html）当作JS脚本引入了，这会直接触发语法错误，先把这行删掉：

<script type="text/javascript" src="Page.html"></script>

2. 修复按钮创建后未添加到DOM的问题 #

你在tree()函数里创建了按钮，但没有把它挂载到页面的DOM结构中，浏览器根本没法渲染这些按钮。可以把创建好的按钮添加到body或者专门的容器里。

3. 优化逻辑：精准匹配Kingdom对应的子Phylum #

当前代码会找出所有phylum类型的条目，但实际上你需要的是属于Plantae这个Kingdom的子Phylum（也就是父ID等于Kingdom的ID 36064765 的条目），这样逻辑更贴合需求。

4. 避免重复创建按钮 #

添加一个状态标记，点击Kingdom按钮时可以切换显示/隐藏Phylum按钮，防止多次点击重复生成一堆相同按钮。

修复后的完整HTML代码 #

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="Taxonomy.js"></script>
</head>
<body>
    <button type="button" id="kingdom" style="position:absolute;left:700px;" onclick="tree()"></button>
    <!-- 专门用来放Phylum按钮的容器，方便管理位置和清空 -->
    <div id="phylum-container" style="position:absolute;left:700px;top:50px;"></div>

    <script type="text/javascript">
        var mydata = Taxonomy;
        const kingdomBtn = document.getElementById("kingdom");
        const phylumContainer = document.getElementById("phylum-container");
        kingdomBtn.innerHTML = mydata[0][2];
        let isPhylumShown = false; // 标记Phylum按钮是否已经显示

        function tree() {
            // 如果已经显示，就清空容器并切换状态
            if (isPhylumShown) {
                phylumContainer.innerHTML = "";
                isPhylumShown = false;
                return;
            }

            // 筛选属于Plantae这个Kingdom的Phylum条目
            const phylumItems = mydata.filter(item => item[1] === 36064765 && item[2] === "phylum");
            
            phylumItems.forEach(item => {
                let btn = document.createElement("button");
                btn.innerHTML = item[3];
                btn.style.display = "block"; // 让按钮垂直排列
                btn.style.marginTop = "5px";
                phylumContainer.appendChild(btn);
            });

            isPhylumShown = true;
        }
    </script>
</body>
</html>

代码说明 #

• 新增phylum-container容器，专门存放生成的Phylum按钮，方便控制位置和清空操作
• 用filter方法精准筛选目标条目，比循环判断更简洁易读
• 加入isPhylumShown状态变量，实现点击Kingdom按钮时切换显示/隐藏Phylum按钮的效果
• 给生成的按钮加了简单样式，让它们垂直排列，更易查看

现在点击显示Plantae的Kingdom按钮，就能看到对应的Tracheophyta和Marchantiophyta两个Phylum按钮啦。

内容的提问来源于stack exchange，提问作者1999