Javascript for showing Div on click using getElementsByClassName

Question

I have a <div> in my page like this:

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

I have an input field and a button like this:

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

I have tried this,

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

The above js code is not working. I am not getting the level ground alert. I don't know what is missing.

P.S : I don't want Jquery as my page has some restriction to use library files.

It will be good, if some one can show me some working fiddle... — steeve
– steeve, Commented Jul 30, 2012 at 8:33
var errorMsg = document.getElementsByClassName('errordiv').item(); replace .item() by [0]: var errorMsg = document.getElementsByClassName('errordiv')[0]; — Fabrício Matté
– Fabrício Matté, Commented Jul 30, 2012 at 8:38
I find [0] more readable and less error-prone, but if it works as it is, alright. — Fabrício Matté
– Fabrício Matté, Commented Jul 30, 2012 at 8:40
@Musa Also, are you sure it works? .item() expects an index argument and is throwing a NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments error on Firebug when called without passing an argument. jsfiddle.net/ult_combo/5M6Tu — Fabrício Matté
– Fabrício Matté, Commented Jul 30, 2012 at 8:45

Musa · Accepted Answer · 2012-07-30 19:34:06Z

1

You need to return false in validate to stop the form from submitting, which reloads the page

EDIT

added polyfill for getElementsByClassName with support for IE7 from 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';
    }
}

edited Jul 30, 2012 at 19:34

answered Jul 30, 2012 at 8:38

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabrício Matté Over a year ago

+1 for the item syntax correction, that's the only thing that could be crashing it from OP's posted code imo.

Musa Over a year ago

@Spencer I added a polyfill for getElementsByClassName with support for IE7

xdazz · Accepted Answer · 2012-07-30 08:36:25Z

0

Your code works in chrome. This is the demo.

document.getElementsByClassName will not work for some old browsers, check here.

answered Jul 30, 2012 at 8:36

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

steeve Over a year ago

So what is the solution for this? I need to use only getElementByClassName. Why becoz, the errordiv is generating from the server.

Paul Aldred-Bann · Accepted Answer · 2012-07-30 08:40:01Z

0

First off you'll need to return a value from your function to stop the page posting back if a validation even occurs, change your HTML to:

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

Then your script to:

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

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

    return true;
}

answered Jul 30, 2012 at 8:40

Paul Aldred-Bann

6,0306 gold badges39 silver badges55 bronze badges

3 Comments

Paul Aldred-Bann Over a year ago

Could do with more info - what version of IE are you using, is it in compatibility mode, what's the actual error message you're getting? Try using an indexer so change your line from document.getElementsByClassName('errordiv').item(); to: document.getElementsByClassName('errordiv')[0];

steeve Over a year ago

It is not working in IE7. Also my code is set to document.getElementByClassName('errordiv')[0]; - Any Help?

Paul Aldred-Bann Over a year ago

OK make sure your method name is EXACTLY document.getElementsByClassName('errordiv')[0] (plural), if this still doesn't work try using document.getElementsBySelector('.errordiv')[0] instead.

Collectives™ on Stack Overflow

Javascript for showing Div on click using getElementsByClassName

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related