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>
document.getElementById('pagina')
te devuelve el div, no el iframe. Prueba condocument.querySelector('#pagina iframe')