onload event

s_avinash_s · November 2, 2018

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>

Ingolme · November 2, 2018

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

s_avinash_s · November 2, 2018

Hi

it works...Thanks

But i need to get the value in my text box only other than directly printing

Edited November 2, 2018 by s_avinash_s

Ingolme · November 2, 2018

Is it not doing that?

s_avinash_s · November 2, 2018

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 November 2, 2018 by s_avinash_s

Ingolme · November 2, 2018

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.

s_avinash_s · November 4, 2018

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>

Ingolme · November 4, 2018

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.

s_avinash_s · November 4, 2018

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>

Sign In

onload event

Recommended Posts

s_avinash_s

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

s_avinash_s

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

s_avinash_s

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

s_avinash_s

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

s_avinash_s

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity