javascript - 使用 div 的类名显示 div 的 Javascript

Question

我的页面中有一个这样的div，

  <div class="errormsg" style="display: none;">Username is empty</div>

我有一个这样的输入字段，

  <input type=textbox id="userid" />

现在，如果输入字段为空，我需要一个 javascript 来显示错误消息 div。我需要使用 div 类而不是 id。请帮忙。

PS：我不想要 Jquery，因为我的页面对使用库文件有一些限制。

Answer 1

试试这个，假设只有一个errormsgdiv -

更新
我在这里添加了一个小提琴。另外，有一个错字 - 已更正

<div class="errormsg" style="display: none;">Username is empty</div>
<input type=textbox id="userid" onchange="validate()" />

function validate(){
    var userId = document.getElementById('userId'),
        errorMsg = document.getElementsByClassName('errormsg').item();
    if (userId.value === ''){
       errorMsg.style.display = 'block'
    } else {
       errorMsg.style.display = 'none';
    }
}

Answer 2

<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />

function getElementsByClassName(className) {
    // For IE    
    if (document.all) {
        var allElements = document.all;
    } else {
        var allElements = document.getElementsByTagName("*");
    }   
    var foundElements = [];  

    for (var i = 0, ii = allElements.length; i < ii; i++) {
        if (allElements[i].className == className) {
            foundElements[foundElements.length] = allElements[i];
        }
    }

    return foundElements;

}

function call(control)
{
    var userid=document.getElementById('userid');
    var errorMsg = getElementsByClassName('errormsg')[0];
    if(userid.value == '')
    {        
        errorMsg.style.display = "block";
    }
    else
    {
        errorMsg.style.display = "none";
    }
}

Answer 3

删除了 JQuery 并添加了 Javascript 代码，如下所示：

<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />

function getElementsByClassName(className) {
    // For IE    
    if (document.all) {
        var allElements = document.all;
    } else {
        var allElements = document.getElementsByTagName("*");
    }   
    var foundElements = [];  

    for (var i = 0, ii = allElements.length; i < ii; i++) {
        if (allElements[i].className == className) {
            foundElements[foundElements.length] = allElements[i];
        }
    }

    return foundElements;

}

function call(control)
{
    var userid=document.getElementById('userid');
    var errorMsg = getElementsByClassName('errormsg')[0];
    if(userid.value == '')
    {        
        errorMsg.style.display = "block";
    }
    else
    {
        errorMsg.style.display = "none";
    }
}