Title: Uncaught ReferenceError: function is not defined
Last modified: May 27, 2025

---

# Uncaught ReferenceError: function is not defined

 *  Resolved [sergio2019wa](https://wordpress.org/support/users/sergio2019wa/)
 * (@sergio2019wa)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/)
 * I’ve created a simple JavaScript function for a HTML Code Block on a WordPress
   website. I don’t have the pro version so I assume that the HTML would’ve been
   able to find the function but it doesn’t seem to load into the website. I’ve 
   even tried adding a console.log( ) to see if it loads in but even that isn’t 
   outputting. The function is called handleSelection. And I get this error every
   time I select an option:
 *     ```wp-block-code
       Uncaught ReferenceError: handleSelection is not defined    at HTMLSelectElement.onchange (post.php?post=8363&action=edit&lang=en:1:84587)
       ```
   
 * This is my first time using the plugin and there’s not that many videos about
   how to use it once editing your WordPress doc so I would appreciate any help 
   or guidance.
 * JS Code:
 *     ```wp-block-code
       function handleSelection() {    const select = document.getElementById('optionSelect');    const paypalLink = document.getElementById('paypalLink');    const bookLink = document.getElementById('bookLink');        const selectedValue = select.value;        paypalLink.classList.add('hidden');    bookLink.classList.add('hidden');        if (selectedValue === 'yes') {        paypalLink.classList.remove('hidden');        bookLink.classList.remove('hidden');    } else if (selectedValue === 'no') {        bookLink.classList.remove('hidden');    }}
       ```
   
 * HTML Code in Code block:
 *     ```wp-block-code
       <div class="container">    <div class="email-prompt">Enter your email to receive updates:</div>    <input type="email" class="email-input" placeholder="your.email@example.com" />        <h2>The Energy Democracy Project's work is fully sustained by donations. We're a small organization with a wide reach in impact, which we hope to grow with your help. Are you able to give between $1-$20 to help support our work?</h2>        <select id="optionSelect" onchange="handleSelection()">        <option value="select">Select</option>        <option value="yes">Yes</option>        <option value="no">No</option>    </select>        <div id="linkContainer" class="link-container">        <a id="paypalLink" href="https://www.paypal.com/checkout/example" class="link paypal-link hidden" target="_blank">            Pay with PayPal        </a>                <a id="bookLink" href="https://example.com/booking" class="link book-link hidden" target="_blank">            Book Now        </a>    </div></div>
       ```
   
 * ![](https://ibb.co/zhkZ4X3m)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/)
 * (@diana_burduja)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18486381)
 * Hello [@sergio2019wa](https://wordpress.org/support/users/sergio2019wa/),
 * I didn’t manage to replicate the “handleSelection is not defined” error message
   on my test website, even if I copy/pasted the exact JS and HTML code from your
   example.
 * Here is what I did:
    1. Added a Custom JS Code with the plugin, together with a “console.log” line, 
       so I can see the value change in the select. See [this screenshot](https://imgur.com/ig10Xc0).
    2. Added the HTML as a “Custom HTML” block. See [this screenshot](https://imgur.com/ndfrtkk).
    3. On the frontend changed the value of the select several times. The browser’s
       console shows me correctly the “yes”, “no” or “select” values. See [this screenshot](https://imgur.com/cQ9l2F8).
 * Hopefully the screenshots help you find out what you were doing wrong.
 *  Thread Starter [sergio2019wa](https://wordpress.org/support/users/sergio2019wa/)
 * (@sergio2019wa)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18487762)
 * Hello SilkyPress,
 * I’ve created a new Page to attempt it again. For context I’m helping an Org. 
   create a Landing page that uses a dropdown menu. I just now tried referencing
   a different JS function that was already used before I got access to the page
   and that method is also throwing a Uncaught Reference Error. I’d also like to
   add that this isn’t the main page of their website. So I didn’t specify in the
   JS to only work in a certain page.
    1. JS code that I just added a console.log [https://imgur.com/a/sxw3WJ9](https://imgur.com/a/sxw3WJ9)
    2. The html code block in new page [https://imgur.com/a/e9SsbVF](https://imgur.com/a/e9SsbVF)
    3. The Error messages I get when trying to use the dropdown menu [https://imgur.com/a/3hGXCxT](https://imgur.com/a/3hGXCxT)
 *  Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/)
 * (@diana_burduja)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18488110)
 * Your last screenshot with the errors is not from a page on the frontend, but 
   from the block editor.
 * By default the Simple Custom CSS & JS loads the custom JS code on the frontend.
   You can choose to load a JS code also in the block editor by selecting the “In
   Block editor” option under the “Where in site” heading from within the options
   found on the right side of the editor. But that will also not make the “handleSelection”
   function available within the HTLM code block. The explanation for this behavior
   would take quite long and it might be a bit too technical.
 * At the moment, with your current setup, the “handleSelection” function should
   work alright on your frontend page.
 * If you insist on making it work both in the block editor, then you might want
   to move the JS code in the HTML code block, as follows:
 *     ```wp-block-code
       <script>	function handleSelection() {		// ... the function definition	}</script><div class="container">	<!-- The rest of your HTML code --></div>
       ```
   
 * without the use of the Simple Custom CSS & JS plugin. See [this screenshot](https://imgur.com/L60VwbU).
 *  Thread Starter [sergio2019wa](https://wordpress.org/support/users/sergio2019wa/)
 * (@sergio2019wa)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18488170)
 * Funny enough putting my script in the HTML code block was the first thing I tried.
   But immediately got this JSON error message: [https://imgur.com/a/ZHTQQoD](https://imgur.com/a/ZHTQQoD).
 * Looking into it, it’s WordPress’ way of avoiding security issues b/c putting 
   JS in WordPress websites could lead to problems. I think I’ll just have to ask
   the admin of the website if I can download a different plugin and see if that
   works.
 * I appreciate your quick responses, the only things I have left to try is create
   a new page and potentially getting rid of some cache as I saw online that could
   be a problem causer. If I ever figure it out, I’ll be sure to let you know!
 *  Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/)
 * (@diana_burduja)
 * [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18488184)
 * On my side I don’t get the “Updating failed. The response is not a valid JSON
   response” message when adding the JS to the HTML code block. In fact, the select
   was calling the “handleSelect” function without any errors.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Uncaught ReferenceError: function is not defined’ is closed to new replies.

 * ![](https://ps.w.org/custom-css-js/assets/icon-128x128.png?rev=1303730)
 * [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/custom-css-js/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/custom-css-js/)
 * [Active Topics](https://wordpress.org/support/plugin/custom-css-js/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/custom-css-js/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/custom-css-js/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [SilkyPress](https://wordpress.org/support/users/diana_burduja/)
 * Last activity: [12 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-function-is-not-defined/#post-18488184)
 * Status: resolved