1

tengo un problema, resulta que estoy aprendiendo javaScript, entonces cree una pagina web de tortas (Solo para mi), y cuando le hacen click a la imagen de algunas de las tortas, aparece su información que proviene de la base de datos, eso está todo funcionando bien, pero el único problema que tengo, es que no me muestra la imagen a la cual se le hace click, no muestra la imagen y no se como hacerlo, por sus ayudas, muchas gracias.

<?php               
                        include './controller/productoController.php';
                        $data = productoController::listarImagenes();          
                    ?>
                </div>
            </div>           
            <!--Creamos las filas-->
            <div class="row">
                <!--En cada filas, crearemos columnas-->
                <!--col-12 col-md-6 col-lg-4 mb-4, -->
                <?php
                    foreach($data as $key){
                ?>
                <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                     <a href="#" data-toggle="modal" onclick="mostrarTorta(this.parentElement);" data-target="#ventanaModal">
                    <div class="card">
                            <img src="<?php echo $key['ruta_imagen']; ?>" class='modal-img' height='255px'/>
                        <div class="card-body">
                            <div class="badges">
                                <span class="badge badge-warning modal-nombre"><?php echo $key['nombreProducto']; ?></span>                   
                            </div>
                            <div class="badges">
                                <span class="badge badge-success modal-cantidad">Cantidad: <?php echo $key['cantidadProducto']; ?></span>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
                <?php
                    }
                ?> 
                </div>
            </div> 
        <!-- Modal -->
        <div id="ventanaModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-contenido">
                    <h2 class="pt-1 modal-nombre"></h2>                  
                    <p class="modal-cantidad"></p>
                    <img class="modal-img" height="145px" width="100%">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
        <!--Fin Modal-->        
<!--Código que estoy utilizando-->
<script language="javascript">
function mostrarTorta(contenedor){

    var modal = document.getElementById('ventanaModal');

    // Cliente
    modal.getElementsByClassName('modal-nombre')[0].innerText = contenedor.getElementsByClassName('modal-nombre')[0].innerText;

    //Acá es donde tengo el problema (Imagen).
    modal.getElementsByClassName('modal-img')[0] = contenedor.getElementsByClassName("modal-img")[0];

    console.log(modal.getElementsByClassName('modal-img')[0] = contenedor.getElementsByClassName("modal-img")[0]);
    debugger;
    //modal.getElementsByClassName('modal-cantidad')[0].innerHTML = contenedor.getElementsByClassName('modal-cantidad')[0].innerHTML;
    // Descripcion   

    //$('#ventanaModal').modal('hide'); // cerrar
}
</script>
<!---->
3
  • 1
    Aparte de que estás asignando la imagen dentro de un console.log(), probablemente solo necesitas asignar el origen: modal.getElementsByClassName('modal-img')[0].src = contenedor.getElementsByClassName("modal-img")[0].src
    – Triby
    Commented el 9 jun. 2020 a las 18:57
  • 1
    Amigo, ultra hyper, mega GRACIAS, no sabes cuanto tiempo estuve buscando la respuesta, muy agradecido, gracias, ahora, soy nuevo en esta comunidad, como puedo poner el ticket de la respuesta correcta y cerrar la pregunta??
    – plask
    Commented el 9 jun. 2020 a las 19:03
  • Me alegra que lo hayas solucionado. Hasta donde sé, no es necesario realizar una acción para cerrar la pregunta, ojalá algún moderador o alguien con más experiencia pueda confirmarlo o decirte qué hacer.
    – Triby
    Commented el 9 jun. 2020 a las 19:09

1 respuesta 1

1

Puedes mandar la ruta de tu imagen por parametro dentro de onclick

onclick="mostrarTorta(<?php echo $key['ruta_imagen']; ?>);"

En tu función mostrarTorta, recupera el elemento donde vas a mostrar tu imagen con

<script language="javascript">
function mostrarTorta(srcImage){

    const IMAGE = document.querySelector(".modal-img");
 // Añade un atributo a tu tag de imagen con setAttribute("atributo-a-modificar", "valor")
    IMAGE.setAttribute("src", srcImage);

}
</script>

Espero te sirva.

1
  • Tendría que ser un parámetro adicional, porque está enviando el contenedor para tomar el resto de datos.
    – Triby
    Commented el 9 jun. 2020 a las 18:58

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.