0

i have made a very basic and simple code in which i have an input field which is validated on every keypress but when i enter anything in the form nothing happens , when i tried the chrome developers this was the error "Cannot set property 'innerHTML' of null Error"

i don't get what am i doing wrong ,i know "document.getElementbyId('show')" returns null but why? someone help please! thank u

this is my index.html file

<script type="text/javascript">
var xmlHttp = new XMLHttpRequest();   

function validate(user){               
        xmlHttp.open("GET", "names.php?name="+user, true);             
        xmlHttp.onreadystatechange = function(){
            document.write("error");
            document.getElementById('show').innerHTML = xmlHttp.responseText;
        }
        xmlHttp.send(null);
}


<h2>Enter a name :</h2>
<form>
<input type="text" onkeypress="validate(this.value)" />
<div id="show"></div>
</form>
Muhammad Oan
  • 51
  • 9
  • Don't use `document.write()` after the page has finished loading. – nnnnnn Sep 12 '13 at 12:04
  • possible duplicate of [java script unable to find the element](http://stackoverflow.com/questions/18741143/java-script-unable-to-find-the-element) – epascarello Sep 12 '13 at 12:16
  • ohh yeah actually at the start i didn't use document.write and it was showing no error , but i used it to check if it was going into the function , because it wasn't giving any error but it was also not working either , i don't know why the code is not working – Muhammad Oan Sep 12 '13 at 12:47

4 Answers4

1

The problem is this line:

document.write("error");

When you use document.write() after the page has finished loading it kills the current page, so then there is no 'show' element to be found by document.getElementById('show') on the next line.

It looks to me like you just don't need the document.write() at all, because it doesn't really make sense to spit out a hardcoded "error" when you're trying to display xmlHttp.responseText in a div. If you do need to display an error just display it in that or another div the same way as with the response text.

nnnnnn
  • 138,378
  • 23
  • 180
  • 229
  • ohh yeah actually at the start i didn't use document.write and it was showing no error , but i used it to check if it was going into the function , because it wasn't giving any error but it was also not working either , i don't know why the code is not working – Muhammad Oan Sep 12 '13 at 12:47
  • If you need to test if a function is called use `console.log()` (or use your browser's dev tools to set a break point). – nnnnnn Sep 12 '13 at 13:12
  • sir can't you see what the error is? i've tried so much but can't figure out , there is no error but it's not doing anything – Muhammad Oan Sep 12 '13 at 13:15
  • Take a look at Steve Greatrex's answer: your `onreadystatechange` handler needs to test the `xmlHttp.readyState` value. – nnnnnn Sep 12 '13 at 13:27
  • i've tried that before and nothing happened then and nothing happened now – Muhammad Oan Sep 12 '13 at 13:32
  • Well then I don't know. But you should test the `.readyState` either way. – nnnnnn Sep 12 '13 at 13:38
  • when i write document.getElementById('show').innerHTML = "anything"; it shows "anything" but when i write document.getElementById('show').innerHTML = xmlHttp.responseText; it shows nothing , any ideas??? – Muhammad Oan Sep 13 '13 at 05:19
1

DON'T use document.write after page is loaded as it replaces the content of the page

Sergey Kochetov
  • 380
  • 1
  • 7
1

It's because you're using document.write which is overwriting the whole page and hence 'deleting' div#show.

see: Why is document.write considered a "bad practice"?

Community
  • 1
  • 1
Ben Jackson
  • 10,592
  • 6
  • 29
  • 41
  • ohh yeah actually at the start i didn't use document.write and it was showing no error , but i used it to check if it was going into the function , because it wasn't giving any error but it was also not working either , i don't know why the code is not working – Muhammad Oan Sep 12 '13 at 12:45
0

Edit: Other answers are correct - document.write is replacing the content so the element no longer exists. The remainder of this answer is still valid though!

Presumably you only want to insert the HTML when the request has completed; to do this, filter based on the value of xmlHttp.readyState;

xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState !== 4) { return; }
    document.getElementById('show').innerHTML = xmlHttp.responseText;
};
Steve Greatrex
  • 15,133
  • 5
  • 60
  • 72
  • i seriously don't understand why it's not working , i've tried everything :( – Muhammad Oan Sep 12 '13 at 13:55
  • when i write document.getElementById('show').innerHTML = "anything"; it shows "anything" but when i write document.getElementById('show').innerHTML = xmlHttp.responseText; it shows nothing , any ideas??? – Muhammad Oan Sep 13 '13 at 05:17
  • Have you used fiddler/something to check that there *is* some `responseText`? – Steve Greatrex Sep 13 '13 at 12:39
  • actually now it is showing me something , it's showing me the whole php file , whether i show it in alert or my div but i only want to show what's in my echo , not the whole code – Muhammad Oan Sep 13 '13 at 13:29
  • Well that's an issue with the server-side code. I suggest you ask that in another question – Steve Greatrex Sep 13 '13 at 14:12