Html click event not displaying the results (by using JavaScript) on the page

Question

After clicking the button the JavaScript displays the result on the new tab, but I want the results to be displayed just below the button.

<html>
 <body>
    <input type="button" id="button1" value="Click Here" onclick="print();"/>
 
    <script type="text/javascript"> //script to do some task
    function print()
    {          
          
     document.write('My Text Goes here ');
                           
    }
   </script>
 </body>

beside it works fine check this fiddle: [http://jsfiddle.net/wk7cS/](http://jsfiddle.net/wk7cS/) — Arash Milani, Jan 07 '13 at 13:58
http://stackoverflow.com/questions/9017754/open-in-new-tab-with-dynamic-content and http://stackoverflow.com/questions/427479/programmatically-open-new-pages-on-tabs may useful to you — KarSho, Jan 07 '13 at 14:01

score 0 · Answer 1 · answered Jan 07 '13 at 14:51

You can use document.write only before the pages complete to load.

If you want to add that text after the page is loaded you have to alter the DOM using some native javascript functions (appendChild, createElement, etc), or you can use jQuery (or other javascript framework) for this. The second is easier because you don't need to concern of browser compatibility.

jQuery eg:

$("#button1").after("My Text Goes here");

score 0 · Answer 2 · answered Aug 27 '22 at 14:23

Remove semicolon from onclick function but it works without any problem when writing semicolon OR not.

 <input type="button" id="button1" value="Click Here" onclick="print()"/>
 
    <script type="text/javascript"> 
    function print()
    {          
          
     document.write('My Text Goes here ');
                           
    }
   </script>

Html click event not displaying the results (by using JavaScript) on the page

2 Answers2