Tengo que hacer, a raiz de un archivo html ya dado (el cual no se puede modificar), una ventana modal que se muestra cuando se clickea una imagen.. El css ya esta dado, solo hay que crear a traves de DOM las etiquetas y atributos necesarios para que funcione. Este es el html:
<aside>
<h2>Concurso!!</h2>
<img src="fotos/peliculas.jpg" alt="Peliculas de Marvel" title="Click para participar en el sorteo" />
<span id="respuesta_concurso"></span>
<p>Participá en nuestro concurso y ganate todo el pack de películas de Marvel en BluRay</p>
</aside>
</section>
La imagen que se debe clickear es la que refiere a peliculas de marvel. Este es el js que hice para que aparezca la ventana modal que debe aparecer:
var d=document;
var section1=d.getElementsByTagName('section')[0];
var concurso=section1.getElementsByTagName('aside')[0];
var img_concurso=concurso.getElementsByTagName('img')[0];
var inputs, labels;
img_concurso.onclick = Modal;
function Modal(){
var div = d.createElement('div');
div.id='modal';
var formu = d.createElement('form');
formu.method='post';
formu.action='#';
div.appendChild(formu);
var div2= d.createElement('div');
var cerrar=d.createElement('a');
cerrar.href='#';
cerrar.innerHTML='Cerrar';
div2.appendChild(cerrar);
div.appendChild(div2);
var h2=d.createElement('h2');
h2.innerHTML='Concurso!!!';
div.appendChild(h2);
var div3=d.createElement('div');
var span1 = d.createElement('span');
span1.innerHTML='Tu Nombre'
var input1= d.createElement('input');
input1.type='text';
input1.name='nombre';
div3.appendChild(span1);
div3.appendChild(input1);
div.appendChild(div3);
var div4=d.createElement('div');
var span2 = d.createElement('span');
span2.innerHTML='Tu email';
var input2= d.createElement('input');
input2.type='text';
input2.name='email';
div4.appendChild(span2);
div4.appendChild(input2);
div.appendChild(div4);
var div5=d.createElement('div');
var span3=d.createElement('span');
span3.innerHTML='Genero preferido (mínimo 4 generos)';
div5.appendChild(span3);
div.appendChild(div5);
var div6=d.createElement('div');
div6.className='generos';
for (var i=0; i<generos.lenght; i++){
inputs= d.createElement('input');
inputs.type='checkbox';
inputs.name='genero_' + generos[i];
inputs.value=generos[i];
labels=d.createElement('label');
labels.innerHTML=generos[i];
labels.appendChild(inputs);
div6.appendChild(labels);
}
div.appendChild(div6);
}
El modelo de como debe quedar la estructura html de la ventana modal ya esta dada y es la siguiente:
<div id="modal">
<form method="post" action="#"><!-- El method y action son, en realidad, irrelevantes -->
<div><a href="#">Cerrar</a></div>
<h2>Concurso!!!</h2>
<div><span>Tu nombre</span><input type="text" name="nombre" /></div>
<div><span>Tu email</span><input type="text" name="email" /></div>
<div><span>Genero preferido (mínimo 4 generos)</span>
<div class="generos"><!-- Este div esta adentro del que encierra generos y debe tener el class .generos -->
<label><input type="checkbox" name="genero_accion" value="accion" /> Accion</label>
<label><input type="checkbox" name="genero_animacion" value="animacion" /> Animacion</label>
<label><input type="checkbox" name="genero_anime" value="anime" /> Anime</label>
<label><input type="checkbox" name="genero_marciales" value="marciales" /> Artes Marciales</label>
<label><input type="checkbox" name="genero_aventura" value="aventura" /> Aventura</label>
<label><input type="checkbox" name="genero_belico" value="belico" /> Bélico</label>
<label><input type="checkbox" name="genero_biografico" value="biografico" /> Biográfico</label>
<label><input type="checkbox" name="genero_catastrofe" value="catastrofe" /> Catástrofe</label>
<label><input type="checkbox" name="genero_clase_b" value="clase_b" /> Clase-B</label>
<label><input type="checkbox" name="genero_clase_z" value="clase_z" /> Clase-Z</label>
<label><input type="checkbox" name="genero_comedia" value="comedia" /> Comedia</label>
<label><input type="checkbox" name="genero_drama" value="drama" /> Drama</label>
<label><input type="checkbox" name="genero_epico" value="epico" /> Épico</label>
<label><input type="checkbox" name="genero_fantasia" value="fantasia" /> Fantasía</label>
<label><input type="checkbox" name="genero_gore" value="gore" /> Gore</label>
<label><input type="checkbox" name="genero_musical" value="musical" /> Musical</label>
<label><input type="checkbox" name="genero_policial" value="policial" /> Policial</label>
<label><input type="checkbox" name="genero_scifi" value="scifi" /> Sci-Fi</label>
<label><input type="checkbox" name="genero_suspenso" value="suspenso" /> Suspenso</label>
<label><input type="checkbox" name="genero_terror" value="terror" /> Terror</label>
<label><input type="checkbox" name="genero_western" value="western" /> Western</label>
</div>
</div>
<!-- El boton debe estar disabled -->
<div><input type="button" value="Participar" disabled="disabled" /></div>
</form>
</div>
Los generos estan guardados en un array externo. El js no esta terminado, pero al tratar de ejecutarlo no pasa nada, y la consola no me tira errores... Alguien podra guiarme en que estoy equivocandome? Gracias!
innerHTML
hay que usartextContent
enlabels.innerHTML=generos[i];
. innerHTML mete código HTML y puede mal interpretar signos<
,>
ó&
además de ser sensible a la inyección de código HTML. Es una cuestión de seguridad