+ 1

This Code isn't working with class can anyone help......?

<!DOCTYPE html> <html> <head> <title> ...... </title> <script type="text/javascript"> function test(){ var txt=document.getElementsByClassName("txt_name"); var error1=document.getElementsByClassName("msg_name"); if(txt.value==''){ error1.innerHTML="please enter your name"; } else{ error1.innerHTML=''; } } </script> <style type="text/css"> span{ color: orangered; } </style> </head> <body> <input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span><br> LastName:<input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span> <br> <input type="button" id="btn_click" name="btn_click" value="Click" onclick="test()" /> </body> </html

javascript

16th Jun 2017, 6:17 PM

avinash Fav

5 Answers

+ 14

Full code: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <script type="text/javascript"> function test(){ var txt=document.getElementsByClassName("txt_name"); var error1=document.getElementsByClassName("msg_name"); if(txt[0].value==''){ error1[0].innerHTML="please enter your name"; } else{ error1[0].innerHTML=''; } } </script> <style type="text/css"> span{ color: orangered; } </style> </head> <body> <input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span><br> LastName:<input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span> <br> <input type="button" id="btn_click" name="btn_click" value="Click" onclick="test()" /> </body> </html>

16th Jun 2017, 6:55 PM

Igor Makarsky

+ 13

Check the if-else statement part. It should look like this: if(txt[0].value==''){ error1[0].innerHTML="please enter your name"; } else { error1[0].innerHTML=''; } The getElementsByClass() function returns an array. So, if you want to access array elements you should use indexes.

16th Jun 2017, 6:33 PM

Igor Makarsky

+ 3

I guess that your purpose is to test all fields, not only the first one (at index 0), so the fix consist to iterate over the array returned by getElementsByClassName: <!DOCTYPE html> <html> <head> <title>......</title> <script type="text/javascript"> function test(target){ var txt=document.getElementsByClassName("txt_name"); var error1=document.getElementsByClassName("msg_name"); var i = txt.length; while (i--) { if (txt[i].value=='') { error1[i].innerHTML="please enter your name"; } else { error1[i].innerHTML=''; } } } </script> <style type="text/css"> span { color: orangered; } </style> </head> <body> FirstName <input type="text" class="txt_name" name="first_name"> <span class="msg_name"> </span> <br> LastName: <input type="text" class="txt_name" name="last_name"> <span class="msg_name"> </span> <br> <input type="button" id="btn_click" name="btn_click" value="Click" onclick="test()"> </body> </html> Anyway, I have improve identation of your code, and corrected some (not important, but better way to write as valid code as possible) mistakes: + don't finish any tag by an ending slash, noticely those working by pair: <span></span> and not <span /><span (but even alone tags, as <input> rather <input /> or <br> and no <br /> (but you don't this ;)) + don't gove twice a same 'name' attribute value: it's intended to work as 'id', being unique in a document

16th Jun 2017, 7:42 PM

visph

+ 2

I forgot to notify you a third mistake: + be careful of closing correctly all opened curly brackets (you've forgot the closing one of your function body ^^)

16th Jun 2017, 7:58 PM

visph

+ 1

Thanks for your help but it is't working <!DOCTYPE html> <html> <head> <title> ...... </title> <script type="text/javascript"> function test(){ var txt=document.getElementsByClassName("txt_name"); var error1=document.getElementsByClassName("msg_name"); if(txt[0].value==''){ error1[0].innerHTML="please enter your name"; } else { error1[0].innerHTML=''; } </script> <style type="text/css"> span{ color: orangered; } </style> </head> <body> FirstName<input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span><br> LastName:<input type="text" class="txt_name" name="txt_name"> <span class="msg_name" /> </span> <br> <input type="button" id="btn_click" name="btn_click" value="Click" onclick="test()" /> </body> </html Could you please run it on your pc and provide me the working code

16th Jun 2017, 6:56 PM

avinash Fav