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>
<!---->
console.log()
, probablemente solo necesitas asignar el origen:modal.getElementsByClassName('modal-img')[0].src = contenedor.getElementsByClassName("modal-img")[0].src