Tengo esta función y estoy tratando de mostrar fotos usando un bucle. en name1 tengo la ubicación del archivo de las fotos, cada bucle cambio la foto, por lo que la ubicación obviamente cambia. en console.log veo el archivo, por ejemplo "cardImages/7_of_diamonds.png" .
ahora el problema que tengo es que realmente no entiendo cómo mostrar las fotos y mantenerlas allí, así que encontré 2 formas pero en realidad no funcionan. y el resultado final debería verse como la foto que agregué a la publicación. el primer bucle para la identificación de ph1. y el segundo bucle para la identificación de ph2. ¿Qué me estoy perdiendo aquí? ejemplo
//$("#ph1").append("<img src='name1'>"); //result.innerHTML = "<img src=''${name2}'' alt='ph2' />"; function DisplayUsingLoop(pla1, numb1) { var name1; for (i = 0; i < numb1; i++) { name1 = pla1[i].img console.log(name1) result.innerHTML = "<img src=''${name2}'' alt='ph2' />"; } for (i = 0; i < numb2; i++) { name1 = pla2[i].img console.log(name1) $("#ph1").append("<img src='name1'>"); } <body> <input type="button" value="Start" onclick="start()" /> <div id="container"> <div id="ph1"> Player 1: </div> <div id="ph2"> Player 2: </div> </div>Para mostrar fotos usando un bucle, use el bucle for. En primer lugar, debe colocar su js dentro de las etiquetas, así:
<script> //this is js </script>Jugador 1:
//this is js let div = document.getElementById(`ph1`) for (let i = 0; i < 5; i++) { div.innerHTML += `<img src=`your_image_file_name`></img>` }si desea imágenes diferentes cada vez, hágalo manualmente sin un bucle:
//this is js let div = document.getElementById(`ph1`) div.innerHTML += `<img src='img1.png'></img>` div.innerHTML += `<img src='img2.png'></img>`Además, intente aprender js y html usando w3schools antes de comenzar a codificar estas cosas.
Además, está usando jQuery, que necesita importar usando html antes de iniciar su js.
Además, intente usar un formato html estricto y coloque js al final de su cuerpo.
Prueba esto
su función de inicio debe contener las matrices de cartas de sus jugadores.
function start(){ var cards1 = ["cardImages/A_of_diamonds.png", "cardImages/2_of_diamonds.png", "cardImages/3_of_diamonds.png", "cardImages/4_of_diamonds.png"]; var cards2 = ["cardImages/10_of_diamonds.png", "cardImages/J_of_diamonds.png", "cardImages/Q_of_diamonds.png", "cardImages/K_of_diamonds.png"]; DisplayUsingLoop(cards1, 4, "ph1"); DisplayUsingLoop(cards2, 4, "ph2"); }A la función DisplayUsingLoop agregué el idPlayer
function DisplayUsingLoop(pla1, numb1, idPlayer)Tal vez use una clase en sus divs como 'ph' y luego use algo como esto:
let x=document.getElementsByClassName('ph'); Array.from(x).forEach((el)=> { el.innerHTML += `<img src=`image_src_name`></img>` };