登录表单API连接异常：Email值无法获取排查求助

问题描述 #

用JavaScript对接登录表单时，console.log能正常输出password值，但始终获取不到email值。已核对HTML与JS代码中的email ID，确认书写无误，也尝试替换getElementById为querySelector，问题仍未解决。

相关代码 #

HTML代码

<form class="form" action="#" method="post">
    <h3>Log In</h3>
    <div class="input">
        <label for="email">Email</label>
        <input type="email" placeholder="Email" id="email">
        <label for="password">Mot de passe</label>
        <input type="password" placeholder="Mot de passe" id="password">
        <input type="submit" value="Se connecter" id="submit">
        <p id="errorMessage"></p>
        <a class="link" href="#">Mot de passe oublié</a>
        <p id="erreur"></p>
    </div>
</form>

JavaScript代码

const submit = document.getElementById("submit");
const errorMessage = document.getElementById("errorMessage");
submit.addEventListener("click", (e) => {
    e.preventDefault();
    const email = document.querySelector("#email").value;
    const password = document.querySelector("#password").value;
    console.log("email: ", email);
    console.log("password: ", password);
    if (!email || !password) {
        document.getElementById("errorMessage").innerHTML = "Veuillez remplir tous les champs";
        return;
    }
    fetch("http://localhost:5678/api/users/login", {
            method: "POST",
            headers: {
                accept: "application/json",
                "Content-type": "application/json",
            },
            body: JSON.stringify({email: email, password: password}),
        })
        .then(authResponse => {
            console.log("authResponse: ", authResponse);
            if (authResponse.status === 200) {
                return authResponse.json();
            }
            else if (authResponse.status === 401) {
            errorMessage.textcontent = "Accès non autrorisé";
            }
            else if (authResponse.status === 404) {
            errorMessage.textcontent = "Utilisateur non trouvé";
            } else {
            errorMessage.textcontent = `Error: ${authResponse.status}`;
            }
            })
            .then(userData => {
                console.log("userData: ", userData);
                if (userData) {
                window.localStorage.setItem("userData", JSON.stringify(userData));
                window.location.replace = "admin.html";
            }
            })
            .catch(error => console.error(error));
        });

排查方向与修复建议 #

1. 检查页面是否存在重复ID
   在浏览器控制台执行document.querySelectorAll('#email')，如果返回的元素数量大于1，说明页面中有多个id="email"的元素，导致JS获取到了错误的元素（比如隐藏的其他输入框）。解决方法是确保页面中ID唯一，删除或修改重复的ID。

2. 确保JS在DOM加载完成后执行
   如果你的JS代码写在<head>标签中，可能会在email元素渲染前就执行，导致获取到的元素value为空。可以把JS代码移到</body>标签前，或者用DOMContentLoaded事件包裹：

   document.addEventListener('DOMContentLoaded', () => {
       // 原JS代码放在这里
   });
   

3. 检查输入框是否被遮挡或禁用
   确认email输入框没有被其他元素（比如透明的div/input）覆盖，导致实际输入内容没有进入目标输入框；同时检查输入框是否被设置了disabled或readonly属性（可在控制台用document.getElementById('email').disabled确认）。

4. 修正代码中的语法错误（不影响email获取，但会导致后续功能异常）

   • errorMessage.textcontent 应为 errorMessage.textContent（注意Content首字母大写），否则错误信息无法正常显示；
   • window.location.replace = "admin.html" 应为 window.location.replace("admin.html")，这是调用方法的正确语法，否则无法跳转页面。

内容的提问来源于stack exchange，提问作者Miguel Vidal bravo jandia