How To Make Try it Yourself Editor Like W3schools

Subscribe our YouTube Channel    

Hello dosto mai BM Aapka swagat karta hu aajke yah fresh article mai, aaj mai aapko sikhaunga kis tarah se aap Try it Yourself Editor bana sakte hai Like W3schools.



<!-- JQuery -->

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- CSS Style -->

<style type="text/css">
br { display: none; }
 textarea, iframe{display: block;margin: 10px 0;width:100%;border: 1px solid #333;}
</style>

<!-- JavaScript -->

<script type="text/javascript">
 function updateIframe(){
 var myFrame = $("#myframe").contents().find('body');
 var textareaValue = $("textarea").val();
 myFrame.html(textareaValue);
 }
</script>

<textarea rows="5" cols="50" placeholder="Type HTML or text here..."></textarea>

<button style="border:0" type="button" onclick="updateIframe()"><i class="fa fa-pencil-square-o"></i> Run Code </button>

<iframe id="myframe"></iframe>


Share Share on Facebook Share on Twitter Share on LinkedIn Pin on Pinterest Share on Stumbleupon Share on Tumblr Share on Reddit Share on Diggit

Hey, I’m Bharat Makwana, A Full Time Blogger & Youtuber, Founder of InfinityGyan, WPMesh, Veewom and BM Tech Tips YouTube Channel.

You may also like this!