Estoy usando el menú desplegable para cambiar dinámicamente el contenido de una página. Funciona, pero es tirar un error de js en Chrome SOLO. Lo que Chrome recomienda no sé cómo implementar. El sitio está construido en ExpressionEngine 2.8.1.

MENSAJE DE ERROR EN CHROME

Uncaught TypeError: No se puede establecer la propiedad ‘onchange’ null funciones.js:65

evento.returnValue está en desuso. Por favor, utiliza el estándar del evento.preventDefault() en su lugar.

MI Código JS

document.getElementById("drop").onchange = function() {
    if (this.selectedIndex!==0) {
        window.location.href = this.value;
    }        
};

MI Código HTML

            <form method="post" action="{path='locations/index'}" class="drop">
                <select id="drop">
                    <option>Select a Location:</option>
                {exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
                    <option value="{site_url}index.php/locations/{url_title}">{title}</option>
                {/exp:channel:entries}
                </select>
            </form>
  • funciona bien en Chrome, ¿qué versión está en ejecución? Hice esto en un jsfiddle y funcionó bien
  • Puedes dar algo más de información sobre el JS, por favor? Es que la secuencia de comandos directamente en el HTML? Hay más de JS o simplemente esta línea? ¿Estás seguro que tu Chrome es estable?
  • Parece que eres de ejecutar este código en jQuery, eventhandler, $(document).ready() tal vez? Si el código funciona en otros navegadores, su plantilla probablemente se rompe en Chrome. Usted puede comprobar el innerHTML de la form justo antes de intentar configurar el controlador de eventos para select. Se puede ver la etiqueta < select > y su id?
  • Es muy probable que se trata de un navegador capricho. Sabiendo de vainilla js para acceder al dom es genial, pero si quieres fiabilidad, el uso de JQuery para seleccionar el elemento adecuado. Como Adeneo publicado, la única explicación es que el elemento no ha sido seleccionado por el documento.getElementById llamada. Sin información adicional, es imposible responder.
InformationsquelleAutor DVLPR | 2014-05-08

3 Comentarios

  1. 15

    Sólo hay una posible razón para que el mensaje de error, document.getElementById("drop") no devuelve el elemento, y la única razón para esto es que el elemento no existe, pero en el HTML, obviamente, de manera que el script se debe ejecutar antes de que los elementos en el DOM.

    Tiene que incluir el javascript después de los elementos en el DOM, o envuélvalo en un DOM listo controlador, como la ventana.onload etc.

    <form method="post" action="{path='locations/index'}" class="drop">
        <select id="drop">
            <option>Select a Location:</option>{exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
            <option value="{site_url}index.php/locations/{url_title}">{title}</option>{/exp:channel:entries}
        </select>
    </form>
    <script>
        document.getElementById("drop").onchange = function() {
            if (this.selectedIndex !== 0) {
                window.location.href = this.value;
            }
        };
    </script>
    • Tengo el código js en mis funciones de archivo. Voy a tratar de la manera que lo tengo y a ver si me sigue apareciendo el error. Gracias por tu ayuda en esto.
    • Esto funcionó 🙂 Muchas gracias por la ayuda … todos así.
  2. 1

    Uso de documento listo evento

    $(document).ready(function(){
    
     $('#drop').change(function(){ 
        if (this.selectedIndex !== 0) {
            window.location.href = this.value;
        }
     })
    
    });

Dejar respuesta

Please enter your comment!
Please enter your name here