Writing Javascript into a WordPress Page or Post

Recently I was interested in writing some Javascript into a WordPress Page, and came across several differing ways to do this. The one that seemed the easiest to understand was one that was analogous to writing Javascript in a regular static page, and used shortcode to insert the Javascript. So here is an example of how to write Javascript into a WordPress Page ( or post ) using the shortcode method. The following form was inserted in HTML mode, and the shortcode is inserted after it. In this case the javascript is event driven, and loops through the form collecting all the data from all the radio buttons, and setting the results in the bottom of the form. I am using ShortCode Manager plugin.
Remember to insert the shortcode after the form, so that all the DOM elements have been identified by the time the JavasScript is ready to load.
The form has each radio element the group  with a call to the JavaScript with <input onclick="loopForm( )" to run the script.

[sb name="js"]

The form is identified with form id="quizform" and contains only radio buttons, and the JavaScript short code contains the code:

var radioResults = 0;
var totalscore = document.getElementById("totalscore");

function loopForm() {
var form = document.getElementById("quizform");
radioResults = 0;
for (var i = 0; i < form.elements.length; i++ ) {

if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
//alert ("form.elements[i]: [" + i + "] was " + form.elements[i].value );
radioResults += parseInt( form.elements[i].value ) ;
}
}
}

totalscore.value = radioResults;

}

When using shortcode make sure that you have inserted the opening and closing script tags in the shortcode itself, which is not shown here.

• About
• Latest Posts

Edward Rosenthal

Edward worked at Lawrence Berkeley Laboratory in the hills of Berkeley Ca in the 70's, where and when the internet backbone was being developed (DARPA). He worked in operations and then as a consultant with scientists and researchers in the consulting office. He debugged their programs and jobs. He also worked in the business department for several years programming in Fortran, Cobol, Real CICS, pascal, C,C++ and Oracle and Informix 4gl's and all the Unix shell languages and the lab's Vaxen and Unices and the connection to the Cray.He worked at various corporations in San Francisco as a freelancer for 12 years. Higher Source Web Sites started developing web sites in 2001, while in the real estate business. He started blogging and developing sites for his colleagues and his company, then other Real Estate companies. His background in business programming, database administration, & software development made staying within the soft technologies more appealing than other choices. He lives in Corvallis Oregon with his wife Pam and several doggies.

Latest posts by Edward Rosenthal (see all)

• Higher Source Sites and Yelp - December 1, 2015
• Extraordinary Views - August 24, 2015
• Finding an href with jquery and enqueing the jscript code for WordPress - September 22, 2014