call javascript method directly from html

Question

Hello I want to call javascript method directly from jsp.Here is my dummy code in this javascript method print1() is not calling.

<html>`
 <body>
 <h1>hello</h1>
 <script>print1()</script>
 <p>hii</p>

  <script>
   function print1(){
    alert("hello");
    document.getElementsByTagName("p").innerHTML="hey";
    }
   </script>
   </body>
   </html>

Solving this can help me to great extent. Note-I can't call it using onload as this is only dummy code I have to apply logic to some other code

You have a few errors with your code. You need close the quotation after "hey". After tag there is a character, remove that too. — cosmoonot, Apr 08 '17 at 17:51
Your main problem is that you're calling `print1()` before you define it. Swap the 2 scripts around and it will work (after you fix the above mentioned syntax error). — Reinstate Monica Cellio, Apr 08 '17 at 17:52
won't print1() written where it currently is still work because of function hoisting though? — Ananth Rao, Apr 08 '17 at 17:54
@Archer, I think attributing hoisting to multiple script tags is a little bit inaccurate. You can actually put the first print1() in the top script in a setTimeOut block and it will run without any problem. — jrook, Apr 08 '17 at 18:24
@jrook Of course you can. That actually proves that hoisting *does not* occur between script blocks. Try moving the function into the 1st script block but after the call and it will work. That's hoisting. With it in the 2nd block it does not work. Hoisting still occurs though :) — Reinstate Monica Cellio, Apr 09 '17 at 08:24

jrook · Accepted Answer · 2017-04-09T09:05:46.160

First, there are a few syntax errors in your code that need to be fixed.

Then, You will need to call the function after it is defined (or in the same <script> tag). Function hoisting does not hoist print1() in time. That is because the browser tries to execute the script as soon as it encounters it. This means when the browser sees <script>print1()</script>, it is not even aware of the rest of the file.

So you need to invoke print1() after the function is defined. In addition to the solutions in comments and the other answer, another option would be to put the script in a separate file and invoke it with defer.

printFunc.js:

print1();

In the html file:

<script src="printFunc.js" defer></script>

This will invoke print1(). Note that defer does not work if the script is not external.

Just for fun (and To see how the browser goes through <script> tags), you can even invoke the function via setTimeout:

<script>
    setTimeout(function(){ print1(); }, 3000);
</script>
<script>
    function print1(){
       alert("hello");
       document.getElementsByTagName("p").innerHTML="hey";
    }
</script>

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

There are two options to fix the issue:

Option1: Move the call <script>print1()</script> to the end of the file (i.e., define the function first before the call and look here for clear explanation on this)

Option2: Call it during the body onload as shown below:

<body onload="print1()">

</body>

edited May 23 '17 at 12:10

Community

1
1

answered Apr 08 '17 at 17:57

Vasu

21,832
11
51
67

score 0 · Answer 3 · answered Apr 08 '17 at 18:16

Firstly its that you can call it in body tag as "onload", Secondly "getElementsByTagName" returns array so you have to tell at which array position you want to make your change

 <html>`
 <body onload= "print1()">
  <h1>hello</h1>


    <p>hii</p>

  <script>
    function print1(){
     alert("hello");
      document.getElementsByTagName("p")[0].innerHTML="hey";
     }
   </script>

You can do this way also

 <html>`
   <body>
    <h1>hello</h1>

      <p>hii</p>

    <script>
     function print1(){
       alert("hello");
        document.getElementsByTagName("p")[0].innerHTML="hey";
       }
   </script>
   <script>print1();</script>
   </body>
    </html>

call javascript method directly from html

3 Answers3