无法通过单击按钮更改文本答案

【问题标题】：Can't get text to change with a button click无法通过单击按钮更改文本
【发布时间】：2013-04-18 01:26:13
【问题描述】：

我正在尝试更改表单内的一行文本；更具体地说，我希望文本在某些条件下发生变化。条件是检查用户何时单击按钮。在这种情况下，我希望在用户将输入字段留空时更改文本。此代码包括我正在使用的整个表单和脚本。我遇到的问题是单击按钮时文本似乎会发生变化，但只有一秒钟或只要警报消息出现。之后，它又回到原来的文本。我脚本中正在访问的行是第 5 行代码。

<div id="userRegistration"> <!--  Registration Form Shell -->

            <form name="registration">
            <div id="leftSideForm"> <!--  Left side of the Registration Form -->

                <span style="color:red">*</span>
                Enter a Username: <input type="text" name="userName" /> <br />
                 <b id="yy">test </b> <br />

                <span style="color:red">*</span>
                Enter Password: <input type="password" name="userPassword" /><br />

                <span style="color:red">*</span>
                Confirm Password: <input type="password" name="cUserPassword" /><br /> <br /> <br />

                <span style="color:red">*</span>
                First name: <input type="text" name="firstName" /><br />

                Middle initial: <input type="text" name="middleName" /><br />

                <span style="color:red">*</span>
                Last name: <input type="text" name="lastName" /><br /> <br />

            </div> <!-- end of Left sideform -->

            <div id="rightSideForm">

                <span style="color:red">*</span>
                Email Address: <input type="text" name="userEmail" /><br />

                <span style="color:red">*</span>
                Confirm Email: <input type="text" name="confirmUserEmail" /><br /> <br /> <br /> <br />

                <button type="submit" onclick="validateUsername()" >Register</button>
            </div> <!-- end of right sideform -->

            </form>

</div> <!-- End of registration -->


<script type="text/javascript">
function validateUsername()
{
var x=document.forms["registration"]["userName"].value;
if (x == null || x== "")
{
document.getElementById("yy").innerHTML = "WHY WON'T YOU WORK GRRRR";
alert("First name must be filled out");
}
}
</script>

【问题讨论】：

你的问题有相当多的代码。为了尽快获得更好的帮助，请发帖SSCCE (link)。

标签： javascript html

【解决方案1】：

问题是您没有停止表单提交事件。在您的情况下，这可以通过onclick 中的return validateUsername() 和validateUsername 函数中的return false 来完成：

http://jsfiddle.net/rqUdT/

但是最好使用标准事件注册（通过addEventListener 并使用事件对象的preventDefault 方法来停止默认的点击行为。

http://jsfiddle.net/rqUdT/1/

【讨论】：

【解决方案2】：

您的文本替换工作正常。但是，一旦您关闭警报框，就会发送表单以刷新页面。

将onclick="validateUsername()" 更改为onclick="return validateUsername()" 并将return false 添加到您的点击处理函数的末尾。

一旦掌握了窍门，请考虑在表单 HTML 中使用 addEventListener() 而不是硬编码的 Javascript。

【讨论】：

【解决方案3】：

jsFiddle Demo

使用 jquery 并删除 onclick 可能会更容易：

JS：

$('#submit').click(function (e) {
    e.preventDefault();
    var x = document.forms["registration"]["userName"].value;
    if (x === null || x === "") {
        document.getElementById("yy").innerHTML = "WHY WON'T YOU WORK GRRRR";
        alert("First name must be filled out");
    }
});

HTML：

<button id="submit" type="submit">Register</button>

【讨论】：