使用getElementsByClassName在点击时显示Div的Javascript

Javascript for showing Div on click using getElementsByClassName

本文关键字：显示 Div Javascript getElementsByClassName 使用      更新时间：2024-06-01

我的页面中有一个<div>，如下所示：

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

我有一个输入字段和一个类似的按钮：

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

我试过了，

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

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

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

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

编辑

为getElementsByClassName添加了polyfill，并支持来自https://gist.github.com/2299607

// 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';
    }
}

您的代码在chrome中工作。这是演示。

document.getElementsByClassName不适用于某些旧浏览器，请查看此处。

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

<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;
}
相关文章：