Helo Daniweb,

I am in the process of building a WYSIWYG text editor, in an attempt to understand how they work. I am a novice at JavaScript, however what I have learnt so far seems to make sense.

The problem comes when I try and change the text rapidly, if I change it to bold, then type something then change it to normal and repeat this a couple of times it seems to break and the text doesn't become bold until three or four clicks of the bold button later.

Could someone please explain why it does this and what sort of things I need to add to prevent it, this is my current code:


<html lang = "en" >


        <title> WYSIWYG Editor </title>

        <script type = "text/javascript" >

            function WYSIWYG() {

                document.getElementById('Editor').contentDocument.designMode = "on";


            function Bold() {
                document.getElementById('Editor').contentWindow.document.execCommand("bold", false, null);
            function Italic() {
                document.getElementById('Editor').contentWindow.document.execCommand("italic", false, null);
            function Underline() {
                document.getElementById('Editor').contentWindow.document.execCommand("underline", false, null);

            function Change() {




    <body onload = "WYSIWYG();" >

        <button onclick = "Bold()"           > <b> B </b> </button>
        <button onclick = "Italic()"         > <i> I </i> </button>
        <button onclick = "Underline()"      > <u> U </u> </button> <br><br>

        <iframe id = "Editor" ></iframe>



Thank you.

document.getElementById('Editor') does a lookup each time. It would increase performance a little if you just store this in a variable once, and use the variable instead.

Thank you for that tip, however the problem is that it still won't always change the text when it is pressed?

This question has already been answered. Start a new discussion instead.