Title: wordpress with html and javascript
Last modified: August 31, 2016

---

# wordpress with html and javascript

 *  Resolved [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/)
 * Hi, I have a wordpress page with a “visual editor” wigget.
 * Insede of this wigget, I have a combobox that I build with html, this has a “
   onchange” event that call a javascript function.
 * what this function do is to change the “a tag”.href from one value to a new one.

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/page/2/?output_format=md)

 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202783)
 * If it was me, I’d use jQuery, something liek this (note: not tested as I typed
   this directly into here…):
 *     ```
       jQuery (document).ready (function () {
           jQuery ('#select_id').change (function () {
               var link_url = jQuery (this).val ();
   
               jQuery ('#link_id').attr ('src', link_url);
           });
       });
       ```
   
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202786)
 * **this is my code:**
 *     ```
       <form>
       <span style="color:black; font-size:18pt; text-transform:uppercase;">Seleccone el mes:</span>
       <select style="width:120px" id="mesValor" name="mesValor" onchange="myFunction()">
          <option selected="selected" value="">Seleccione un elemento</option>
          <option value="01">Enero</option>
          <option value="02">Febrero</option>
       </select>
   
       <script>
           function myFunction() {
               var x = document.getElementById("mesValor").value;
   
               switch(x) {
                  case "01":
                      var y = "ENE";
                      break;
                  case "02":
                      var y = "FEB";
                      break;
                  default:
                      var y = "ENE";
                      break;
               }
   
       	var z = "ST-0366-E_" + y +".pdf";
           document.getElementById("myAnchor").href = "/Archivos/2009/" + x + "/a/" + z;
           document.getElementById("demo").innerHTML = "The link above now goes to www.cnn.com.";
           }
       </script>
   
       <a style="color: blue" id="myAnchor" href="/Archivos/2009/a/ST-0366-E.pdf">a1) Estructura Orgánica Funcional</a>
       <p><a id="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>
   
       </form><br>
       ```
   
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202788)
 * I dont understand what is the problem with my code.
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202789)
 *     ```
       <select style="width:120px" id="mesValor" name="mesValor" onchange="myFunction()">
          <option selected="selected" value="">Seleccione un elemento</option>
          <option value="01">Enero</option>
          <option value="02">Febrero</option>
       </select>
       ```
   
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202791)
 * OK. So what part doesn’t work? What errors are you getting? What de-bugging have
   you done?
 * You should add in de-bugging statments through the code to see what it’s doing
   each step of the way.
 *     ```
       function myFunction() {
               var x = document.getElementById("mesValor").value;
       console.log ("Value for X is '" + x + "'");
   
               switch(x) {
                  case "01":
                      var y = "ENE";
                      break;
                  case "02":
                      var y = "FEB";
                      break;
                  default:
                      var y = "ENE";
                      break;
               }
       console.log ("Value for Y is '" + y + "'");
   
       	var z = "ST-0366-E_" + y +".pdf";
       console.log ("Value for Z is '" + z + "'");
           document.getElementById("myAnchor").href = "/Archivos/2009/" + x + "/a/" + z;
           document.getElementById("demo").innerHTML = "The link above now goes to www.cnn.com.";
       console.log ("Finished set up");
       }
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202801)
 * And where did you put this code?
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202802)
 * in firefox, I have this message:
 * ReferenceError: myFunction is not defined
 * In crhome:
 * ?preview_id=31:105 Uncaught ReferenceError: myFunction is not definedonchange
   @ ?preview_id=31:105
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202806)
 * That error means that your function `myFunction()` is either not includd on the
   page or in any of the JavaScript files linked to it, or that it’s defined after
   you’re trying to call it.
 * I’d try putting it first, or moving it to an external JavaScript file that’s 
   included in your sites `<head>` area.
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202817)
 * **Andrew Nevins** : the code is in a page inside the widget “visual editor”
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202820)
 * **catacaustic**: The code is in the page.
 * the javascritp was moved at the first after tag <form>
 * but the problem persist.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202825)
 * [@bgva2005](https://wordpress.org/support/users/bgva2005/), You need to enqueue
   the JavaScript properly, using a Child Theme (assuming you haven’t created your
   own theme) and the Child Theme’s functions.php file.
 * First set up a Child Theme: [https://codex.wordpress.org/Child_Themes](https://codex.wordpress.org/Child_Themes)
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202826)
 * It’s very hard to give any more advice unless we can see the page that it’s meant
   to be working on. JavaScript can be a troublesome little beast at the best of
   times, and this is one of those times where there’s no simple answer from just
   the information that you’ve given so far.
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202838)
 * what I did to solve this problem was:
 * Add
    **// < ![CDATA[** after <script>
 * and
 * **// ]]>** befor </script>
 * thanks to **Andrew Nevins** and **catacaustic** for your help
 * this is the code that is working:
 *     ```
       <form>
       <span style="color:black; font-size:18pt; text-transform:uppercase;">Seleccone el mes:</span>
       <select style="width:120px" id="mesValor" name="mesValor" onchange="miFuncion()">
          <option selected="selected" value="00">Seleccione un elemento</option>
          <option value="01">Enero</option>
          <option value="02">Febrero</option>
       </select>
       <script>// < ![CDATA[
        function miFuncion() {
               var x = document.getElementById("mesValor").value;
               console.log ("Value for X is '" + x + "'");
               document.getElementById("myAnchor").href = "/Archivos/2009/ccccc";
   
               switch(x) {
                  case "01":
                      var y = "ENE";
                      break;
                  case "02":
                      var y = "FEB";
                      break;
                  default:
                      var y = "ENE";
                      break;
               }
               console.log ("Value for Y is '" + y + "'");
   
       	var z = "ST-0366-E_" + y +".pdf";
               console.log ("Value for Z is '" + z + "'");
               document.getElementById("myAnchor").href = "/Archivos/2009/" + x + "/a/" + z;
               document.getElementById("demo").innerHTML = "The link above now goes to www.cnn.com.";
               console.log ("Finished set up");
       }
       // ]]></script>
   
       <a id="myAnchor" href="/Archivos/2009/a/ST-0366-E.pdf">a1) Estructura Orgánica Funcional</a>
   
       </form><br>
       ```
   
 *  Thread Starter [bgva2005](https://wordpress.org/support/users/bgva2005/)
 * (@bgva2005)
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202938)
 * I need to open again this problem, because today I was testing in other server
   and the problem persist.
 * Can you help me?
 * [http://gobiernoabierto.quito.gob.ec/?page_id=848](http://gobiernoabierto.quito.gob.ec/?page_id=848)
 * after I choose into the combobox, the href must change.
 * Thanks for your help.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/#post-7202941)
 * Are you sure it’s not just a simple spelling error?
 *     ```
       <select style="width:120px" id="mesValor" name="mesValor" onchange="miFuncion()">
       ```
   
 * Instead of
 *     ```
       <select style="width:120px" id="mesValor" name="mesValor" onchange="miFunction()">
       ```
   

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/page/2/?output_format=md)

The topic ‘wordpress with html and javascript’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 17 replies
 * 3 participants
 * Last reply from: [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/wordpress-with-html-and-javascript/page/2/#post-7203019)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics