使用getElementsByCassName在单击时显示Div的Javascript

我的页面中有一个

，如下所示：

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

<input type="textbox" id="txt1" />
<input type="button" value="Submit" id="btn1" onclick="validate();" />

上面的js代码不起作用。我没有接到地面警报。我不知道少了什么

---

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

您的代码在chrome中工作。这是最新的

---

document.getElementsByClassName

对于某些旧浏览器不起作用，请检查。

您需要在验证中返回false以停止表单提交，从而重新加载页面

编辑

为支持IE7的GetElementsByCassName添加了polyfill

//如果浏览器没有GetElementsByCassName函数，请添加该函数
//限制：仅适用于一个类名
//版权所有：Eike Sendhttp://eike.se/nd
//许可证：麻省理工学院许可证
如果（！document.getElementsByClassName）{
document.getElementsByClassName=函数（搜索）{
var d=文档、元素、模式、i、结果=[]；
if（d.queryselectoral）{//IE8
返回d.querySelectorAll（“.”+搜索）；
}
如果（d.evaluate）{//IE6，IE7
pattern=“../*[包含（concat（“”，@class'），“+search+”）]”；
元素=d.evaluate（模式，d，null，0，null）；
while（（i=elements.iterateNext（））{
结果：push（i）；
 }
}否则{
elements=d.getElementsByTagName（“*”）；
pattern=newregexp（“（^ |\\s）”+search+“（\\s |$）”；
对于（i=0；i

首先，您需要从函数返回一个值，以停止页面回发。如果发生验证，请将HTML更改为：

<input type="button" value="Submit" id="btn1" onclick="return validate();" />

---

如果有人能给我看一些小提琴就好了…

var errorMsg=document.getElementsByClassName（'errordiv'）.item（）用
[0]
替换
.item（）
：
var errorMsg=document.getElementsByClassName（'errordiv'）[0]
@FabrícioMatté
.item（）
很好，我发现
[0]
更可读，也更不容易出错，但如果它按原样工作，好吧。@Musa也一样，你确定它能工作吗？需要一个索引参数，并在调用Firebug时在未传递参数的情况下抛出
NS\u错误\u XPC\u不够\u参数：不够参数
错误。那么解决这个问题的办法是什么呢？我只需要使用getElementByClassName。为什么呢？因为errordiv是从服务器生成的。+1用于项语法更正，这是OP发布的代码imo中唯一可能使其崩溃的内容。@Spencer I为getElementsByClassName添加了一个polyfill，支持IE7。可以使用更多信息-您使用的是什么版本的IE，是否处于兼容模式，您收到的实际错误消息是什么？尝试使用索引器，以便从document.getElementsByCassName（'errordiv'）.item（）更改行；收件人：document.getElementsByClassName（'errordiv'）[0]；它在IE7中不起作用。另外，我的代码设置为document.getElementByClassName（'errordiv'）[0]；-有任何帮助吗？确定方法名称与document.getElementsByCassName（'errordiv'）[0]（复数）完全一致，如果仍然不起作用，请尝试改用document.getElementsBySelector（'.errordiv'）[0]。
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

function validate() {
    //alert('hi');
    var inptextbox = document.getElementById('txt1');
    //alert('level zero');
    var errorMsg = document.getElementsByClassName('errordiv')[0];
    //alert('level ground');
    if (inptextbox.value == '') {
        //alert('hi2');
        errorMsg.style.display = 'block';
        return false;
    } else {
        errorMsg.style.display = 'none';
    }
}

<input type="button" value="Submit" id="btn1" onclick="return validate();" />

function validate() {
    var inptextbox = document.getElementById('txt1');
    var errorMsg = document.getElementsByClassName('errordiv').item();

    if (inptextbox.value == '') {
        errorMsg.style.display = 'block';
        return false;
    }

    return true;
}