Question

我想突出显示两个输入字段的边框红色，如果它们没有相同的值，并在匹配时突出显示为绿色。另外我想用Javascript编写函数而不是jQuery。

HTML：

<form class="form">
                <hr class="verticalline">
                <input class="newpd shine" value="New Password"
                            onblur="this.value'New Password':this.value;"
                            onfocus="this.select()"
                            onclick="if (this.value=='New Password'){this.value=''; this.type='password'}">
                <input class="repeatpd shine" value="Repeat Password"
                            onblur="this.value'Repeat Password':this.value;"
                            onfocus="this.select()"
                            onclick="if (this.value=='Repeat Password'){this.value=''; this.type='password'}">
                <input id="button" type="button" value="Submit" onclick="ausgabe();">

使用Javascript：

/*changedpd*/
function passtrue(){
    var newpd = document.getElementsByClassName('newpd').value;
    var repeatpd = document.getElementsByClassName('repeatpd').value;
    if(newpd === repeatpd){
        document.getElementsByClassName('shine').style.border ="2px solid green";
    }else{
        document.getElementsByClassName('shine').style.border ="2px solid red";
    } 
}
function ausgabe(){
    document.getElementById('button').innerHTML = passtrue();
}

Answer 1

viewModel.onCleared()返回元素列表，而不仅仅是一个元素。

成功

getElementsByClassName

或者只使用function passtrue(){ var newpd = document.getElementsByClassName('newpd')[0].value; var repeatpd = document.getElementsByClassName('repeatpd')[0].value; if(newpd === repeatpd){ document.getElementsByClassName('shine')[0].style.border ="2px solid green"; }else{ document.getElementsByClassName('shine')[0].style.border ="2px solid red"; } }（如果该类只有一个元素）

querySelector

两个输入字段匹配时突出显示边框颜色

1 个答案: