How to stop javascript code being broken when going into visual editor

Question

so I already had to make my code uglier than it needed to be, because whenever I tried to do && wordpress decided I wanted &amp, and now I am finding that when I go into visual view any javascript defined on that page breaks.

For example the code I have now (which works):

<script>
function checkCosts() {
var date = document.getElementsByName("date")[0].value;
var roomtype = document.getElementsByName("roomtype")[0].value;
var night = document.getElementsByName("night")[0].value;
var room = document.getElementsByName("room")[0].value;
var month = date.substring(0, 2);
var year = date.substring(8, 10);
var day = date.substring(4, 6);
var time = month.concat(year);
var fulldate = parseInt(day.concat(time));
var inttime = parseInt(time);
//=================================
//Date Range 1
//Check earliest date
if (inttime >= 415) {
    //Check latest date
    if (inttime <= 915) {
        //Classic Roomtype
        if (roomtype == "Classic") {
            //Nights Double
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,480";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,450";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,415";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "2,575";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "2,510";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "2,440";
                }
            }
        }
        //End
        //Luxury Roomtype
        if (roomtype == "Luxury") {
            //Nights
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,620";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,580";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,535";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "2,830";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "2,760";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "2,685";
                }
            }
        }
        //End
        //Suite Roomtype
        if (roomtype == "Suite") {
            //Nights
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,860";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,815";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,770";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "3,300";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "3,235";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "3,145";
                }
            }
        }
        //End
    }
}
 //=================================
        //Date Range 2
        //Check earliest date
            //Check latest date

                //Classic Roomtype
                if (roomtype == "Classic") {
                    //Nights Double
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,795";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,745";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,700";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "3,185";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "3,100";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "3,015";
                        }
                    }
                }
                //End
                //Luxury Roomtype
                if (roomtype == "Luxury") {
                    //Nights
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,960";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,905";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,860";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "3,515";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "3,425";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "3,320";
                        }
                    }
                }
                //End
                //Suite Roomtype
                if (roomtype == "Suite") {
                    //Nights
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,860";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,815";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,770";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "4,505";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "4,375";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "4,245";
                        }
                    }
                }
                //End
            }
}
</script>

But as soon as I go into visual editor (which the person I am designing this site for will undoubtedly do) the code becomes

<script>// <![CDATA[
function checkCosts() {
var date = document.getElementsByName("date")[0].value;
var roomtype = document.getElementsByName("roomtype")[0].value;
var night = document.getElementsByName("night")[0].value;
var room = document.getElementsByName("room")[0].value;
var month = date.substring(0, 2);
var year = date.substring(8, 10);
var day = date.substring(4, 6);
var time = month.concat(year);
var fulldate = parseInt(day.concat(time));
var inttime = parseInt(time);
//=================================
//Date Range 1
//Check earliest date
if (inttime >= 415) {
    //Check latest date
    if (inttime <= 915) {
        //Classic Roomtype
        if (roomtype == "Classic") {
            //Nights Double
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,480";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,450";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,415";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "2,575";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "2,510";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "2,440";
                }
            }
        }
        //End
        //Luxury Roomtype
        if (roomtype == "Luxury") {
            //Nights
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,620";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,580";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,535";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "2,830";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "2,760";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "2,685";
                }
            }
        }
        //End
        //Suite Roomtype
        if (roomtype == "Suite") {
            //Nights
            if (room = "Double") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "1,860";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "1,815";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "1,770";
                }
            }
            //Nights Single
            if (room = "Single") {
                if (night == "3") {
                    document.getElementById("cost").innerHTML = "3,300";
                }
                if (night == "5") {
                    document.getElementById("cost").innerHTML = "3,235";
                }
                if (night == "7") {
                    document.getElementById("cost").innerHTML = "3,145";
                }
            }
        }
        //End
    }
}
 //=================================
        //Date Range 2
        //Check earliest date
            //Check latest date

                //Classic Roomtype
                if (roomtype == "Classic") {
                    //Nights Double
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,795";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,745";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,700";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "3,185";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "3,100";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "3,015";
                        }
                    }
                }
                //End
                //Luxury Roomtype
                if (roomtype == "Luxury") {
                    //Nights
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,960";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,905";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,860";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "3,515";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "3,425";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "3,320";
                        }
                    }
                }
                //End
                //Suite Roomtype
                if (roomtype == "Suite") {
                    //Nights
                    if (room = "Double") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "1,860";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "1,815";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "1,770";
                        }
                    }
                    //Nights Single
                    if (room = "Single") {
                        if (night == "3") {
                            document.getElementById("cost").innerHTML = "4,505";
                        }
                        if (night == "5") {
                            document.getElementById("cost").innerHTML = "4,375";
                        }
                        if (night == "7") {
                            document.getElementById("cost").innerHTML = "4,245";
                        }
                    }
                }
                //End
            }
}
// ]]></script>

Which doesn't work. This happens for ANY javascript, no matter how simple or complex that is on a page.

Is there any way to stop this, without having to teach the person I am making this for how to deal with HTML, just so they can edit a few things

TheDeadMedic · Accepted Answer · 2015-09-17 10:48:15Z

1

Is there any way to stop this

Don't have JavaScript in your editor. It's dirty and difficult to maintain (as you've found out).

Instead, you could:

Use a page template
Use custom fields (post meta)
Use conditional code in your functions.php

For 3), as an example:

function wpse_202946_script() {
    if ( is_page( 'id_or_title_or_slug' ) ) {
        wp_enqueue_script(
            'my-theme-script-name',
            get_template_directory_uri() . '/path/to/script.js',
            null, // Dependencies
            null, // Version
            true  // In footer
        );
    }
}

add_action( 'wp_enqueue_scripts', 'wpse_202946_script' );

answered Sep 17, 2015 at 10:48

TheDeadMedic

36.3k9 gold badges67 silver badges102 bronze badges

Not possible. The script has information which needs to be edited every now and again, and is similar but different, on every page. For example if (night == "7") {document.getElementById("cost").innerHTML = "1,415";} May be 1,415 on page 1 but on page 2 be 1,700
– Jordan
Sep 17, 2015 at 10:50
1

Then use custom fields to set the values you need, and generate the actual code inline in a template file.
– TheDeadMedic
Sep 17, 2015 at 10:52

Add a comment |

Stack Exchange Network

How to stop javascript code being broken when going into visual editor

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
visual-editor
or ask your own question.

Hot Network Questions

How to stop javascript code being broken when going into visual editor

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptvisual-editor or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
visual-editor
or ask your own question.