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

add class to element returning unexpected results

本文关键字：结果 元素 意外 返回 添加      更新时间：2023-09-26
<div id="er_msg" style="width:200px;" align="center"></div>

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

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();

     }
}

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

我使用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;
}

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

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

相关文章：