Skip to main content
se añadieron 45 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32

buenas, 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.

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>
<!---->
 

 

buenas, 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>
<!---->
 

 

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>
<!---->
Origen Enlace
plask
  • 23
  • 4

Mostrar Imagen en Modal con JavaScript

buenas, 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>
<!---->