0

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

1 Answer 1

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:

  1. Use a page template
  2. Use custom fields (post meta)
  3. 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' );
2
  • 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. Sep 17, 2015 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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