Jump to content
Sign in to follow this  
s_avinash_s

onload event

Recommended Posts

Hi

I am trying to use onload event, but it is not working.

i will receive value from 

document.getElementById("hw_maj").value = this.responseText;

any issue with my code.

<p id="hw_maj"></p>
     <body onload="hw_major()"> </body>
    <script>

    function hw_major() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {	  
          document.getElementById("hw_maj").value = this.responseText; 
          document.getElementById("myText_hw_maj").value = this.responseText; 	  
        }
      };
    xhttp.open("GET", "hw_ver.txt", true);
    xhttp.send();
    }
    </script>


   <h3>HW version:
   
   <input type="text" id="myText_hw_maj" size ="10" style="border:none;font-size:27pt;"></h3>

 

Share this post


Link to post
Share on other sites

Paragraphs do not have a value attribute, only form elements do. Use innerHTML instead.

Share this post


Link to post
Share on other sites

Is it not doing that?

Share this post


Link to post
Share on other sites

Hi 

when i use 

it prints on both....

I need only on text box

document.getElementById("hw_maj").innerHTML = this.responseText; 
          document.getElementById("myText_hw_maj").innerHTML = this.responseText; 	

and 

 <input type="text" id="myText_hw_maj" size ="10" style="border:none;font-size:27pt;"></h3>

 

 

But if use, it prints only in textbox but occupies..i need to avoid it

        if (this.readyState == 4 && this.status == 200) {	  
          document.getElementById("hw_maj").innerHTML = this.responseText; 
          document.getElementById("hw_maj").style.visibility = "hidden";
          	  
        }
      };
    xhttp.open("GET", "hw_ver.txt", true);
    xhttp.send();
    }

    </script>


   <h3>HW version:
   
   <input type="text" id="hw_maj" size ="10" style="border:none;font-size:27pt;"></h3>

 

Edited by s_avinash_s

Share this post


Link to post
Share on other sites

If you don't need it in the paragraph element, then remove the line of code that does that. Just delete this line, but keep all the rest of the code the same:

document.getElementById("hw_maj").innerHTML = this.responseText;

You need to understand what each line of code is doing.

You should also delete that <p> element from your HTML since you're not using it.

Share this post


Link to post
Share on other sites

Hi

I have a code where 3 onload functions are being used.

but only first one displays in text box and other 2 not displaying.

I am not getting what is wrong

<body onload="abc()"> </body>
    <script>

    function abc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {	  
          
          document.getElementById("temp1").value = this.responseText; 	  
        }
      };
    xhttp.open("GET", "temp1", true);
    xhttp.send();
    }

    
    </script>

  <br> <br> 
  
   <h3>SW version:
   
   <input type="text" id="temp1" size ="10" style="border:none;font-size:27pt;"></h3>
  
     <body onload="def()"> 
    <script>

    function def() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {	  
          document.getElementById("temp2").value = this.responseText;        	  
        }
      };
    xhttp.open("GET", "temp2", true);
    xhttp.send();
    }

    </script>
</body>

   <h3>HW version:
   
   <input type="text" id="temp2" size ="10" style="border:none;font-size:27pt;"></h3>

  
     

    
     <br> 
     
      
     <body onload="ghi()"> </body>
    <script>

    function ghi() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {	  
          
          document.getElementById("temp3").value = this.responseText; 	  
        }
      };
    xhttp.open("GET", "temp3", true);
    xhttp.send();
    }

    
    </script>

      <h3>Version Info:
   <input type="text" id="temp3" size ="10" style="border:none;font-size:27pt;"></h3>
   <br>

 

Share this post


Link to post
Share on other sites

You cannot have more than one <body> tag in the document and all of the page's content must be inside that <body> tag. You should use addEventListener if you need more than one function to run when the window loads.

Share this post


Link to post
Share on other sites

Hi

Thanks for the info.

I got some info about addeventlistener and tried the following code.

when i click  button it displays the value.

Without clicking, is it possible to load the value only once.

<!DOCTYPE html>
<html>
<body>
<button id="myBtn">Try it</button>

<p id="demo">

<script>
var x=100;
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×