javascript函数只工作一次答案

【问题标题】：javascript function working only oncejavascript函数只工作一次
【发布时间】：2018-04-27 13:01:56
【问题描述】：

我一直在尝试使用 java 脚本来验证联系表格。这个想法是在每个文本框上方添加一个段落标签，当单击提交按钮时，应该触发一个 javascript 函数。如果文本框为空，则“隐藏”类将从段落的类列表中删除，因此可见问题是该功能仅触发一次，即我第一次单击按钮时。但是如果我填写文本框并再次单击该功能不会被触发。任何机构都可以帮助我吗？注意：如果我使用 getElementById，则不会触发该函数，编译器会转到服务器端函数 btnSubmit_Click，但使用 getElementByName 时，该函数仅会触发一次，如上所述。

        <div id="contactForm" runat="server">
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errname" class="hidden">You must insert your <b>name</b></p>
                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" >
                </div>
            </div>              
            <div class="control-group form-group">
                <div class="controls">
                    <p id="erremail" class="hidden">You must insert your <b>email</b></p>
                    <input type="email" runat="server" class="form-control" id="txtemail" name="txtemail" placeholder="*Email" >
                </div>
            </div>
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errmessage" class="hidden">You must insert a <b>message</b></p>
                    <textarea runat="server" rows="10" cols="100" class="form-control" id="txtmessage" name="txtmessage" placeholder="*Message" maxlength="999" style="resize:none"></textarea>
                </div>
            </div>
            <asp:Button ID="btnSubmit" runat="server"  OnClientClick="return myfun();" OnClick="btnSubmit_Click"  Text="Send Message" class="btn btn-primary btn-block" />
        </div>

而javascript函数是：

    function myfun() {
        document.getElementById("errname").classList.add('hidden');
        document.getElementById("erremail").classList.add('hidden');
        document.getElementById("errmessage").classList.add('hidden');

        var flag = true;
        if (!document.getElementsById("txtname").value) {
            document.getElementById("errname").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtemail").value) {
            document.getElementById("erremail").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtmessage").value) {
            document.getElementById("errmessage").classList.remove('hidden');
            flag = false;
        }
        if (flag == false) { return false;}

    }
</script>

【问题讨论】：

document.getElementsByName 返回一个HTMLCollection，因此它没有value 属性。你的函数确实每次都运行（试试console.log），只是不正确。
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?的可能重复
我尝试了 document.getElementById，但它也不起作用。如果该函数第二次运行，我希望与填充的文本框相关的段落应该被隐藏
什么不完全有效？请edit您的问题并提供minimal reproducible example。使用browser console (dev tools)（点击F12）并阅读任何错误。
我已经编辑了问题并删除了一些与问题无关的代码。希望现在更清楚了。我也尝试使用浏览器控制台（开发工具）它没有显示任何错误它只是转到后端代码

标签： javascript html asp.net twitter-bootstrap

【解决方案1】：

通过将 clientIdMode="static" 添加到 javascript 函数中调用的文本框来完成

                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" clientIdMode="static">

【讨论】：

【解决方案2】：

你的 JS 永远不会返回 true。你有：

if(flag == false) {return false;}

但你永远不会告诉它返回 true。而不是上面的行，为什么不只是：

return flag;

如果出现错误，您将值从 true 更改为 false，因此它将返回 flag 的任何值。

【讨论】：

该标志在函数开始时返回true