JS多函数复用单个输入值故障：仅首个门可打开排查

核心问题 #

你的代码中，var parola=document.getElementById("parola").value;在页面加载完成后立即执行，仅获取一次输入框的初始空值。后续在输入框中输入内容并点击按钮时，parola变量仍保留最初的空值，导致后续按钮的条件判断永远不成立，所以门无法触发打开动画。

另外，门元素采用嵌套结构（door在door2内，door2在door3内…），内层门打开后可能遮挡外层门的交互区域，但这不是当前无响应的主要原因，优先解决值的获取问题。

修复步骤 #

1. 移除全局的parola变量，在每个按钮点击的函数内部实时读取输入框的最新值
2. （可选优化）合并重复逻辑，用单一函数处理所有门的触发，减少冗余代码

修复后的完整代码 #

<html>    
<head>        
    <title>Porta</title>        
    <style>            
        .backDoor {
            background-color: rgb(74, 52, 25);
            position: center;
            top: 0px;
            left: 0px;
            width: 250px;
            height: 540px;
            margin: 0 auto;
            margin-top: 100px;
        }
        .door, .door2, .door3, .door4, .door5 {
            background-color: rgb(74, 52, 25);
            background-image: url(porta.png);
            position: center;
            top: 0px;
            left: 0px;
            width: 250px;
            height: 540px;
            transform-origin: left;
            margin: 0 auto;
            margin-top: 100px;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
        }
        .doorOpen {
            /*prespectiv creates the door open effect*/
            transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-110deg);
        }
        body {
            background-color: black;
            background-image: url(parete.jpg);
        }
    </style>    
</head>    
<body>      
    <div class="backDoor">      
        <div class="door5">        
            <div class="door4">          
                <div class="door3">              
                    <div class="door2">                
                        <div class="door"></div>              
                    </div>          
                </div>        
            </div>      
        </div>    
    </div>          
    <div>            
        <input type="text" id="parola">          
        <button id="button1" onclick="toggleDoor('door', 'MERAVIGLIA')">Apri prima porta</button>          
        <button id="button2" onclick="toggleDoor('door2', 'FIDUCIA')">Apri seconda porta</button>          
        <button id="button3" onclick="toggleDoor('door3', 'ACCOGLIENZA')">Apri terza porta</button>          
        <button id="button4" onclick="toggleDoor('door4', 'BUONENOTIZIE')">Apri quarta porta</button>          
        <button id="button5" onclick="toggleDoor('door5', 'CAMMINAREINSIEME')">Apri quinta porta</button>      
    </div>          
    <script>              
        function toggleDoor(doorClass, correctWord) {
            // 实时获取输入框的最新值，同时去除前后空格
            const parola = document.getElementById("parola").value.trim();
            const element = document.querySelector(`.${doorClass}`);
            if (parola === correctWord) {
                element.classList.toggle("doorOpen");
            }
        }
    </script>    
</body>    
<footer></footer>
</html>

额外优化说明 #

• 合并重复的CSS样式到统一选择器中，减少代码冗余
• 采用通用函数处理所有门的触发逻辑，避免编写多个重复函数
• 添加.trim()处理输入值，避免用户输入前后空格导致判断失败

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