0

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!

4
  • css del modal? me imagino que ese div esta oculto y cuando se hace click se muestra?
    – sioesi
    el 9 nov. 2016 a las 20:28
  • @sioesi exacto, el css ya esta dado por el docente, solo hay que crear las etiquetas necesarias y ya funciona solo.
    – Cecilia
    el 9 nov. 2016 a las 20:30
  • En vez de usar innerHTML hay que usar textContent en labels.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 el 9 nov. 2016 a las 22:35
  • @EmilioPlatzer genial, no sabia de textContent, lo voy a intentar, muchas gracias!
    – Cecilia
    el 9 nov. 2016 a las 22:48

1 respuesta 1

1

Bueno amigo he depurado tu función y todo esta bien, solo que te faltaba agregar el div que has conformado en el cuerpo del documento.

Sería esta línea. document.getElementsByTagName('body')[0].appendChild(div); Quedando la función de esta manera.

  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.length; 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);
            document.getElementsByTagName('body')[0].appendChild(div);

        }

Espero te funcione

5
  • el css ya esta dado en otro archivo. Lo que me propones no podemos hacerlo por pauta.. debemos crear las etiquetas a traves de createElement e ir agregandolas con appendChild..
    – Cecilia
    el 9 nov. 2016 a las 20:53
  • No importa solo lo pongo como ejemplo, si ya tiene la clase css en otro, solo que la agregue el 9 nov. 2016 a las 20:53
  • Lo que me propones no podemos hacerlo por pauta.. debemos crear las etiquetas a traves de createElement e ir agregandolas con appendChild.. la idea del ejercicio es el manejo de DOM avanzado
    – Cecilia
    el 9 nov. 2016 a las 20:54
  • Listo encontre el problema Ya te lo agrego en la respuesta el 9 nov. 2016 a las 21:05
  • Para poder depurar el código, cree la variable de géneros como un arreglo var generos=['comedia','acción] el 9 nov. 2016 a las 21:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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