javascript - 将类添加到返回意外结果的元素

Question

<div id="er_msg" style="width:200px;" align="center"></div>

我正在div使用 JavaScript 在上面添加一个类：

function validateForm()
{
    var x=document.forms["form1"]["email_id"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        document.getElementById("er_msg").innerHTML="Pls enter a valid E-Mail Address ";
        document.getElementById("er_msg").className="alert alert-error";

     }else{
         document.getElementById("er_msg").innerHTML="Thank you!";
         document.getElementById("er_msg").className="alert alert-success";
         saveAppdata();


     }
}

理想情况下，我应该得到一个 red "Pls enter a valid E-Mail Address"和一个 green "Thank you!"，而在这种情况下，两条消息都显示为红色。这些类由 Twitter Bootstrap 预定义。

Answer 1

我使用 Twitter 引导 css 类测试了您的 javascript 函数，它可以正常工作。

这是我的 jsfiddle 代码：http: //jsfiddle.net/yqRCX/

这是css类：

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.alert, .alert h4 {
    color: #c09853;
}
.alert h4 {
    margin: 0;
}
.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 20px;
}
.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success h4 {
    color: #468847;
}
.alert-danger, .alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.alert-danger h4, .alert-error h4 {
    color: #b94a48;
}

所以答案是..我认为您提供的代码没有任何问题。您的添加课程有效。

如果您有其他问题，请提供更多信息，例如您正在尝试的电子邮件值等。