-1

I'm trying to show the selected option on a select input type in an HTML form.

This is my input type:

            <div id="selectorTemaMensaje" class="form-group"><label>&nbsp; Motivo del mensaje: </label>
                <select onchange="return opcionesMensaje();" required class="form-control" name="tema">
                    <option> </option>
                    <option data-tema="material" >Tengo problemas para acceder al material del curso</option>
                    <option data-tema="notaExamen" >Tengo problemas con la nota recibida en un examen</option>
                    <option data-tema="envioPago" >Quiero avisar de un pago que hice o saber si estoy debiendo alguna cuota</option>
                    <option data-tema="envioDoc" >Tengo problemas relacionados con el envío de la documentación solicitada</option>
                    <option data-tema="certificado" >Quiero saber cómo obtener mi certificado</option>
                    <option data-tema="docente" >Quiero preguntar a un docente por una duda con el material de una bolilla</option>
                    <option data-tema="otro" >Otro</option>
                </select>
            </div>
<span id="mostrar"></span>

This is my JS:

$(document).ready(function(){
    function opcionesMensaje() {
        var sel = document.getElementById('select');
        var mostrar = document.getElementById('mostrar');
        sel.onchange = function(){
            var selected = sel.options[sel.selectedIndex];
            mostrar.innerHTML = selected.getAttribute('data-tema');
        };
        sel.onchange();
    }
}

I keep getting

Uncaught ReferenceError: opcionesMensaje is not defined

Every time I try to select an option.

The JS is inside a file that is called at the footer. I can see that file when looking into the page source. And the jQuery file is called before mine.

Rosamunda
  • 14,620
  • 10
  • 40
  • 70
  • 3
    For what it's worth, it's usually a good idea to attach event handlers in Javascript rather than HTML. `$('select').change(function() { ... })` for example. – Mike Cluck Sep 26 '16 at 20:09
  • 1
    You are not actually doing anything in `$(document).ready(function(){...}` other than defining the `opcionesMensaje` function. Thus, there is no reason to have it only called within something that executes only when the document is ready. – Makyen Sep 26 '16 at 20:11

1 Answers1

3

opcionesMensaje is not scoped properly. It's scoped within the anonymous function passed into $(document).ready. It shouldn't be accessible at that level unless you attach it to the window global object. Try something like window.opcionesMensaje = function() { ... }

wpcarro
  • 1,528
  • 10
  • 13
  • Given that, in the code provided, there is no apparent reason for the `opcionesMensaje` function to be defined within `$(document).ready(function(){...}`, the better solution would be to just define the function within the global scope. An even better solution would be to add `opcionesMensaje` as an event listener from within the JavaScript rather than within the HTML (` – Makyen Sep 26 '16 at 20:16