求助：通过文本输入实现SVG房屋地图指定门牌号高亮功能

你当前的按钮方案重复代码太多，改成文本输入的核心是用通用函数接收输入的门牌号，匹配对应SVG元素的ID，再切换高亮样式。下面是具体修改步骤和完整代码：

1. 替换按钮区域为输入控件 #

把原来的按钮组换成文本输入框和触发按钮，方便快速输入门牌号：

<div>
  <input type="text" id="houseNumberInput" placeholder="输入门牌号">
  <button type="button" onclick="highlightHouse()">定位房屋</button>
</div>

2. 重构JavaScript代码 #

删除所有重复的selectXX()函数，只保留一个通用函数处理所有门牌号的高亮逻辑：

• 获取输入框的值，自动补全前导零（匹配SVG元素的两位ID格式，比如01）
• 清除之前所有高亮的房屋，避免多个房屋同时高亮
• 找到目标房屋后切换样式，找不到则给出提示

3. 完整修改后的代码 #

<!DOCTYPE html>
<html lang="zh-CN">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区房屋定位</title>
    <style>
        .default {
            fill: #008000;
            stroke: #000000;
            stroke-width: 3px;
        }

        .selected {
            fill: #ff0000;
            stroke: #000000;
            stroke-width: 3px;
        }

        text {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 24px;
        }

        div {
            padding: 10px 30px;
        }

        #houseNumberInput {
            padding: 5px;
            font-size: 16px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <svg width="500" height="500">
        <g>
            <circle class="default" id="01" cx="380" cy="400" r="40" />
            <text x="373" y="408">1</text>
        </g>
        <g>
            <circle class="default" id="02" cx="380" cy="60" r="40" />
            <text x="373" y="68">2</text>
        </g>
        <g>
            <circle class="default" id="03" cx="80" cy="240" r="40" />
            <text x="74" y="248">3</text>
        </g>
        <g>
            <circle class="default" id="04" cx="430" cy="210" r="40" />
            <text x="423" y="218">4</text>
        </g>
        <g>
            <circle class="default" id="05" cx="110" cy="60" r="40" />
            <text x="103" y="68">5</text>
        </g>
        <g>
            <circle class="default" id="06" cx="230" cy="130" r="40" />
            <text x="224" y="138">6</text>
        </g>
        <g>
            <circle class="default" id="07" cx="130" cy="370" r="40" />
            <text x="124" y="378">7</text>
        </g>
        <g>
            <circle class="default" id="08" cx="280" cy="280" r="40" />
            <text x="273" y="288">8</text>
        </g>
    </svg>

    <div>
        <input type="text" id="houseNumberInput" placeholder="输入门牌号（1-8）">
        <button type="button" onclick="highlightHouse()">定位房屋</button>
    </div>

    <script>
        function highlightHouse() {
            // 获取输入的门牌号并去除空格
            let inputVal = document.getElementById('houseNumberInput').value.trim();
            if (!inputVal) return;
            
            // 补全前导零，匹配SVG元素的ID格式
            let houseId = inputVal.padStart(2, '0');
            
            // 清除所有已高亮的房屋
            document.querySelectorAll('.selected').forEach(el => {
                el.classList.remove('selected');
                el.classList.add('default');
            });
            
            // 定位目标房屋并高亮
            const targetHouse = document.getElementById(houseId);
            if (targetHouse) {
                targetHouse.classList.remove('default');
                targetHouse.classList.add('selected');
            } else {
                alert('未找到对应门牌号的房屋');
            }
        }

        // 可选优化：支持回车触发定位
        document.getElementById('houseNumberInput').addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                highlightHouse();
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• padStart(2, '0')自动补全前导零，确保输入1时能匹配ID为01的SVG元素
• 每次定位前清除历史高亮，保持界面整洁
• 增加回车触发功能，提升操作效率
• 加入空输入和无效门牌号的提示逻辑

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