Question

我正在使用HTML和JavaScript开发网站。当我运行我的代码时，它会运行但是我的if else语句永远不会打到其他情况，无论输入什么内容。有人可以告诉我什么是错的。我是Forms和javaScript的新手，但我认为大多数使用JavaScript的东西都和Java一样。无论如何，代码如下。

    <form id="eForm">        
    <script>

    function CheckForm()
    {
    var first=document.getElementsByTagName("input")[0].value;
    var mid=document.getElementsByTagName("input")[1].value;
    var last=document.getElementsByTagName("input")[2].value;
    var email=document.getElementsByTagName("input")[3].value;
    var date=document.getElementsByTagName("input")[4].value;
    var time=document.getElementsByTagName("input")[5].value;


    if((document.getElementsByTagName("input")[0].value !=="first" || document.getElementsByTagName("input")[0].value !=="") && 

    (document.getElementsByTagName("input")[1].value !=="Initial" || document.getElementsByTagName("input")[1].value !=="") && 

    (document.getElementsByTagName("input")[2].value !=="last" || document.getElementsByTagName("input")[2].value !=="") && 

    (document.getElementsByTagName("input")[3].value !=="someone@example.com" || document.getElementsByTagName("input")[3].value !=="") && 

    (document.getElementsByTagName("input")[4].value !=="xx/xx/xxxx" || document.getElementsByTagName("input")[4].value !=="") && 

    (document.getElementsByTagName("input")[5].value !=="xx:xx" || document.getElementsByTagName("input")[5].value !==""))
    {
    document.getElementsByTagName("input")[0].value='fail';
    }
    else
    {
    alert("One or more fields were not filled in correctly. /n Please try again.");
    document.getElementsByTagName("input")[0].value='works';
    }

    first.value='works';
    }
    </script>

    First name: <input type="text" name="FirstName" id="FirstName" value="first"><br>
    Middle Initial: <input type="text" name="MidName" id="MidName" value="Initial"><br>
    Last name: <input type="text" name="LastName" id="LastName" value="last"><br>
    E-Mail: <input type="text" name="Email" id="Email" value="someone@example.com"><br>
    Date for request: <input type="date" name="Date" id="Date" value="xx/xx/xxxx"><br>
    Time for request: <input type="time" name="Time" id="Time" value="xx:xx"> 
    AM<input type="radio" name="AM/PM" id="AM" checked="true">
    PM<input type="radio" name="AM/PM" id="PM" checked="false"><br>

    <input onclick="CheckForm()" type="button" value="Submit">
    <input onclick="CheckForm()" type="submit" value="Submit">

    On Submit, if a feild is left not filled out, then do not go through and show a message saying that "One or more feilds are not filled out. You must fill them 

    out in order to submit this form."

    </form>

事后看来（仍然是20/20）我应该已经意识到这个表达总是对我的或陈述是真的，所以谢谢v2b指出这一点。

Answer 1

我不是（并且没有人真的）会为您调试代码。但是这里有一些要点让你前进：

您的脚本在输入均匀加载之前运行。将<script>元素放置在页面底部，位于结束</body>下方。

您的输入有名称，请使用它们：

var form = document.forms[0]; //Or getElementByID, whatever
console.log(form["FirstName"]); //The first name input.

你的病情太久了。单独检查项目并每次返回适当的错误。你也会帮助你的用户！
您没有使用<label>来标记输入标签。那样做。
使用<input placeholder="placeholder">拥有占位符文字。（而不只是给出一个初始值）。此外，由于您有标签，占位符文本是多余的。

Answer 2

（document.getElementsByTagName（“input”）[0] .value！==“first”|| document.getElementsByTagName（“input”）[0] .value！==“”）

将永远评估为真..记住它是一个OR，即使一个是真的它是真的..
如果值是“第一”那么它将是（false || true），

和其他5行类似。

编辑：
以下将做你想做的事。另外，不要重复document.getElementsByTagName太多次。 Dom访问它昂贵。在您的情况下，没有必要一次又一次地重复它。你可以按照以下方式进行，

var inputElement = document.getElementsByTagName("input");

if((inputElement[0].value !=="first" && inputElement[0].value !=="") && 
    (inputElement[1].value !=="Initial" && inputElement[1].value !=="") && 
    (inputElement[2].value !=="last" && inputElement[2].value !=="") && 
    (inputElement[3].value !=="someone@example.com" && inputElement[3].value !=="") && 
    (inputElement[4].value !=="xx/xx/xxxx" && inputElement[4].value !=="") && 
    (inputElement[5].value !=="xx:xx" && inputElement[5].value !==""))
{
    inputElement[0].value='fail';
}
else
{
    alert("One or more fields were not filled in correctly. /n Please try again.");
    inputElement[0].value='works';
}

任何人都可以帮我调试我的错误

2 个答案: