wordpress with html and javascript

  • Resolved bgva2005

    (@bgva2005)


    9 years ago

    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)
  • catacaustic

    (@catacaustic)

    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

    (@bgva2005)

    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="https://www.microsoft.com">www.microsoft.com</a></p>

</form><br>
    Thread Starter bgva2005

    (@bgva2005)

    I dont understand what is the problem with my code.

    Thread Starter bgva2005

    (@bgva2005)

    <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

    (@catacaustic)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    And where did you put this code?

    Thread Starter bgva2005

    (@bgva2005)

    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

    (@catacaustic)

    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

    (@bgva2005)

    Andrew Nevins : the code is in a page inside the widget “visual editor”

    Thread Starter bgva2005

    (@bgva2005)

    catacaustic: The code is in the page.

    the javascritp was moved at the first after tag <form>

    but the problem persist.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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.www.ads-software.com/Child_Themes

    catacaustic

    (@catacaustic)

    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

    (@bgva2005)

    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

    (@bgva2005)

    I need to open again this problem, because today I was testing in other server and the problem persist.

    Can you help me?

    https://gobiernoabierto.quito.gob.ec/?page_id=848

    after I choose into the combobox, the href must change.

    Thanks for your help.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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)
  • The topic ‘wordpress with html and javascript’ is closed to new replies.