如何使用多个选择表单作为密码输入？答案

【问题标题】：How can I use multiple select forms as a password input?如何使用多个选择表单作为密码输入？
【发布时间】：2020-09-12 06:08:38
【问题描述】：

我目前正在创建一个拼图网站，其中一个页面要求用户通过选择表单将所有线索输入到页面中，然后按提交，如果所有线索都正确，他们就可以继续。

但是，我在使用多个密码时遇到了问题。用户为前 4 条线索输入什么并不重要，只要最后的第 5 条线索是正确的，它就声称它是正确的。

我已经尝试搜索很多可以链接到此的术语，但我没有运气。我在 Javascript 方面不是最棒的（事实上我对它非常生疏！）所以希望这只是我是个白痴，而不是“这不能完成”的情况。

这是密码选择表单的精简版：

 <body>
        <div>
            <table style="width: 100%;">
                <tr>
                    <td><select id="pswd1" name="pswd1" style="width: 100%;">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                        <option value="5">
                            5
                        </option>
                    </select></td>
                    <td><select id="pswd2" name="pswd2" style="width: 100%;">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                        <option value="5">
                            5
                        </option>
                    </select></td>
                    <td><select id="pswd3" name="pswd3" style="width: 100%;">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                        <option value="5">
                            5
                        </option>
                    </select></td>
                    <td><select id="pswd4" name="pswd4" style="width: 100%;">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                        <option value="5">
                            5
                        </option>
                    </select></td>
                    <td><select id="pswd5" name="pswd5" style="width: 100%;">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                        <option value="5">
                            5
                        </option>
                    </select></td>
                </tr>
            </table>
            <table style="width: 100%; text-align: center;">
                <tr>
                    <td><input onclick="checkPswd();" type="button" value="Submit"></td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
           function checkPswd() {

               var confirmPassword = "1";
               var password = document.getElementById("pswd1").value;

               var confirmPassword = "2";
               var password = document.getElementById("pswd2").value;

               var confirmPassword = "3";
               var password = document.getElementById("pswd3").value;

               var confirmPassword = "4";
               var password = document.getElementById("pswd4").value;

               var confirmPassword = "5";
               var password = document.getElementById("pswd5").value;

               if (password == confirmPassword) {
                    window.location="https://www.youtube.com/";
               }
               else{
                   alert("Try again");
               }
           }
        </script>
    </body>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html web passwords

【解决方案1】：

您遇到的问题是您在末尾设置密码变量等于第五个。尝试替换以下内容：

你的代码：函数 checkPswd() {

               var confirmPassword = "YES";
               var password = document.getElementById("pswd1").value;

               var confirmPassword = "YES";
               var password = document.getElementById("pswd2").value;

               var confirmPassword = "YES";
               var password = document.getElementById("pswd3").value;

               var confirmPassword = "YES";
               var password = document.getElementById("pswd4").value;

               var confirmPassword = "YES";
               var password = document.getElementById("pswd5").value;

               if (password == confirmPassword) {
                    window.location="https://www.youtube.com/";
               }
               else{
                   alert("Try again");
               }
           }

替换为：

function checkPswd() {
    var confirmPassword = "YES";    

    var pass1 = document.getElementById("pswd1").value;
    var pass2 = document.getElementById("pswd2").value;
    var pass3 = document.getElementById("pswd3").value;
    var pass4 = document.getElementById("pswd4").value;
    var pass5 = document.getElementById("pswd5").value;

           if (pass1 == confirmPassword && pass2 == confirmPassword && pass3 == confirmPassword && pass4 == confirmPassword && pass5 == confirmPassword) {
                window.location="https://www.youtube.com/";
           }
           else{
               alert("Try again");
           }
       }

事实上你只是检查第五个而不是全部......希望它有所帮助

【讨论】：

解决了问题！非常感谢。我有一个后续问题，说我想对此变得更复杂一些，并为每个密码设置一个不同的单词。为了实现这一点，我需要对您的代码进行哪些更改？
在 if (pass1 == confirmPassword && pass2 == confirmPassword && pass3 == confirmPassword && pass4 == confirmPassword && pass5 == confirmPassword) 中用confirmPasswords替换你的单词