0

Estoy practicando con sidenav y quiero cambiar el contenido de la pagina reemplazando html, dependiendo la opción que tome, para esto estoy asignando un valor a una variable y luego validarla por un switch, pero no se por qué no lo esta tomando en consola me da el valor por default o tal vez lo estoy haciendo de la forma que no es.

Este es mi html en el que iría el iframe

    <div class="col s12" id="pagina">

    </div>

Este es mi código javascript

    function imprimir (){

        console.log("valor variable - "+valor);
        let html='';
        
        switch (valor){
            case 1:
            html +=`
                <iframe 
                title="informe"
                width="100%"
                height="800"
                src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
                </iframe>`;
                const salida2 = document.querySelector('#pagina');
                salida2.innerHTML = html; 

                alert("valor de la variable "+valor);
                break;
            case 2:
                html +=`
                <iframe 
                title="informe"
                width="100%"
                height="800"
                src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
                </iframe>`;
                const salida = document.querySelector('#pagina');
                salida.innerHTML = html;
                alert("valor de la variable "+valor);
            default:
                console.log('variable navbar no asignada');
                alert("valor por default,  valor de la variable "+valor);
                
        }
        
    };
    
</script>
4
  • Ejecutas el switch en cuanto carga la página y debería estar dentro de una función que puedas llamar cuando se haga clic en alguno de los elementos para que pueda tomar el valor adecuado.
    – Triby
    Commented el 5 oct. 2020 a las 5:42
  • coloque el swicht en la funciona que me indicas, inclusive el ingresa hasta el case 1, me arroja en el laert el valor, pero no se por que no me imprime el iframe en el div. Commented el 5 oct. 2020 a las 13:16
  • document.getElementById('pagina') te devuelve el div, no el iframe. Prueba con document.querySelector('#pagina iframe')
    – Triby
    Commented el 5 oct. 2020 a las 14:27
  • si , ya lo intente de ese modo, acabo de actualizar el código de como lo tengo ahora. En el momento el ingresa al case y me muestra el valor de la variable, trata como de "cargar" el html, pero no pasa nada al final. No se que estaré haciendo mal para que no muestre ese iframe Commented el 5 oct. 2020 a las 14:39

1 respuesta 1

0

Inicialmente estabas ejecutando el switch antes de hacer clic en un botón, por eso era necesario colocarlo dentro de una función.

Al hacer clic en cada botón, actualizas la variable y ejecutas la función, donde se asigna el origen del iframe:

let valor = 0;
$(function() {
    $('#primero').on('click', function() {
        valor = 1;
        imprimir();
    });
    $('#segundo').on('click', function() {
        valor = 2;
        imprimir();
    });
    $('#tercero').on('click', function() {
        valor = 3;
        imprimir();
    });
});

function imprimir (){

        console.log("valor variable - "+valor);
        let html='';
        
        switch (valor){
            case 1:
                $('#pagina iframe').attr('src', 'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik');
                break;
            case 2:
                $('#pagina iframe').attr('src', 'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik');
                break;
            default:
                console.log('variable navbar no asignada');
        }
        
    };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col s12" id="pagina">
  <iframe title="informe" width="100%" height="800" src=""></iframe>
</div>

<button id="primero">Primero</button>
<button id="segundo">Segundo</button>
<button id="tercero">Tercero</button>

Con este fragmento de código se ve que sí funciona y, en caso de algún error, deberías revisar la consola del navegador para saber lo que está pasando.

Nota: Puede funcionar también si creas el contenido HTML para el div pagina, pero duplicas código y es mejor solo actualizar el atributo src del iframe.

1
  • gracias por ayudar me a ver el error que estaba cometiendo Commented el 6 oct. 2020 a las 19:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.