CODEWITHSUNDEEP
javascriptjqueryhtml
user2228462
user2228462

Reputation: 619

Try-it Yourself Text Editor

How would I create an online editor like the W3School's try it yourself editor?

I've already tried using JQuery's keyup(); function, but I can't seem to get it to work. Here's what I have so far:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script type="text/javascript">
$("#idinput").keyup( function() {
$("#idoutput").html($("#idinput").val());
} );
</script>
</head>
<body>


<textarea id="idinput"></textarea>
<br>
<div id="idoutput"></div>
</body>
</html>

Please let me know if I made some simple mistake. I'm very new to JQuery, and this is about the most complicated thing I've written in it so far.

I realize that this might have been asked before, but none of the other solutions have worked. Thanks in advance.

Upvotes: 0

Views: 513

Answers (3)

omacha
omacha

Reputation: 105

The browsers fetches the HTML files from top to bottom. You wrote your JavaScript code before the HTML-elements <textarea> and <div>.

JavaScript code is interpreted and executed directly when it is loaded (except when it sits inside a function). So the JavaScript already runs while your page is still loading and therefore it won't find your HTML elements.

You should wrap your existing code into $(document).ready(function(){ ... }) (with JQuery) or into window.onload = function(){ ... } (what the JQuery function does in a neater way). The code inside these functions is executed when the page is entirely loaded, so your elements will be loaded and usable.

Upvotes: 0

BYTE RIDER
BYTE RIDER

Reputation: 169

Your script executes before the textarea and div even exist. Try wrapping your code with the following, to delay execution until the document is ready.

$(document).ready(function() {
  // Your code here.
});

Upvotes: 3

user571545
user571545

Reputation: 

<script type="text/javascript">
$(document).ready(function() {
   $("#idinput").keyup( function() {
   $("#idoutput").html($("#idinput").val());
} );
});
</script>

Upvotes: 0

Related Questions