性别单选框存储异常：仅MALE可存入localStorage，其余选项失效

错误点梳理 #

1. 元素ID拼写错误：getdata函数中获取女性单选框时，把ID写成了femlae，实际页面中该元素的ID是female，导致无法正确获取元素，FEMALE选项的选中判断永远失效。
2. 单选框name属性不统一：三个性别单选框的name属性分别为male、female、others，不符合单选框互斥规则，用户可同时选中多个选项，逻辑错误。
3. 按钮事件绑定错误：提交按钮重复设置onclick属性，浏览器仅会执行最后一个（未定义的gender()），且表单提交跳转可能导致getdata函数未执行完成，数据存储不完整。

修复后的表单页面（form.html）代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>FORM</title>
        <script>
            function getdata(){
                var name = document.getElementById("name").value;
                var mob = document.getElementById("mob").value;
                var email = document.getElementById("email").value;
                localStorage.setItem("txtValue", name);
                localStorage.setItem("txtValue_2" ,mob);
                localStorage.setItem("txtValue_3", email);
                
                var male = document.getElementById("male");
                var female = document.getElementById("female");
                var others = document.getElementById("others");
                if(male.checked){
                    localStorage.setItem("txtValue_1", "MALE");
                }else if(female.checked){
                    localStorage.setItem("txtValue_1", "FEMALE");
                }else if(others.checked){
                    localStorage.setItem("txtValue_1", "OTHERS");
                }else{
                    localStorage.setItem("txtValue_1", "ERROR");
                }
            }
            function remove(){
                window.localStorage.clear();
            }
        </script>
    </head>
    <body align="center" onload="remove()">
        <h1>FORM</h1><br>
        <form action="display.html" method="get" onsubmit="getdata()">
            NAME : <input type="text" name="name" id="name"><br>
            GENDER : male <input type="radio" name="gender" id="male">
            female <input type="radio" name="gender" id="female">
            others <input type="radio" name="gender" id="others"><br>
            Mobile No. : <input type="text" name="mob" id="mob"><br>
            Email : <input type="email" name="email" id="email"><br>
            <br><br>
            <button type="submit">SUBMIT</button>
        </form>
    </body>
</html>

修复说明 #

• 修正了female元素ID的拼写错误，确保能正确获取元素。
• 将三个性别单选框的name属性统一设置为gender，实现单选互斥功能。
• 移除按钮上重复的onclick属性，改为在表单的onsubmit事件中调用getdata，确保表单提交前完成数据存储。

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