0
101
VistasAl hacer clic en la imagen y agregarla a la fila en Javascript
¿Cómo puedo agregar la figura de ajedrez en la que hice clic en lugar de un signo de interrogación, pero cada vez que hago clic en la figura de ajedrez debería colocarla en el primer lugar "libre", me refiero al primer signo de interrogación? 
Aquí está el código html para figuras de ajedrez y la primera fila de signos de interrogación:
<div class="container-fluid"> <div class="row"> <div class="figures col-md-12"> <img onclick="myFunction()" id="pawn" src="../media/pawn.png" alt="pawn"> <img onclick="myFunction()" id="rook" src="../media/rook.png" alt="rook"> <img onclick="myFunction()" id="knight" src="../media/knight.png" alt="knight"> <img onclick="myFunction()" id="bishop" src="../media/bishop.png" alt="bishop"> <img onclick="myFunction()" id="queen" src="../media/queen.png" alt="queen"> <img onclick="myFunction()" id="king" src="../media/king.png" alt="king"> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="question-first-row col-md-7"> <img class="question" id="question1" src="../media/question.png" alt="question1"> <img class="question" id="question2" src="../media/question.png" alt="question2"> <img class="question" id="question3" src="../media/question.png" alt="question3"> <img class="question" id="question4" src="../media/question.png" alt="question4"> <button type="button" class="buttons btn btn-primary btn-md">OK</button> </div> </div> </div>Y JS que cambia solo el primer signo de interrogación en peón, porque no sé cómo hacer que todo lo demás funcione.
function myFunction(){ document.getElementById("question1").src = "../media/pawn.png"; }
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
puedes :
- recuperar objetivo de evento con
e.target || e.srcElement - acceda a las propiedades necesarias con
target.srcytarget.alt
function myFunction() { var target = event.target || event.srcElement; var questions = document.querySelectorAll('.question'); var cpt = 0; var question; for (cpt; cpt < questions.length; cpt ++) { question = questions[cpt]; if (question.src === 'https://stacksnippets.net/media/question.png') { question.src = target.src; question.alt = target.alt; break; } } } img { width:25px; } <div class="container-fluid"> <div class="row"> <div class="figures col-md-12"> <img onclick="myFunction()" id="pawn" src="https://www.gravatar.com/avatar/0cf65651ae9a3ba2858ef0d0a7dbf900?s=256&d=identicon&r=PG&f=1" alt="pawn"> <img onclick="myFunction()" id="rook" src="https://lh3.googleusercontent.com/a-/AOh14GjFLn81wOifa9KsaN_dY6FaH8GpHEbzOFwR5qKT9w=k-s256" alt="rook"> <img onclick="myFunction()" id="knight" src="../media/knight.png" alt="knight"> <img onclick="myFunction()" id="bishop" src="../media/bishop.png" alt="bishop"> <img onclick="myFunction()" id="queen" src="../media/queen.png" alt="queen"> <img onclick="myFunction()" id="king" src="../media/king.png" alt="king"> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="question-first-row col-md-7"> <img class="question" id="question1" src="../media/question.png" alt="question1"> <img class="question" id="question2" src="../media/question.png" alt="question2"> <img class="question" id="question3" src="../media/question.png" alt="question3"> <img class="question" id="question4" src="../media/question.png" alt="question4"> <button type="button" class="buttons btn btn-primary btn-md">OK</button> </div> </div> </div>
·
Juan Pablo Isaza
Denunciar
0
function myFunction() { var target = event.target || event.srcElement; var questions = document.querySelectorAll('.question'); var cpt = 0; var question; for (cpt; cpt < questions.length; cpt ++) { question = questions[cpt]; if (question.src === "../media/pawn.png") { question.src = target.src; question.alt = target.alt; break; } }} Hay una línea en event.target y event.srcElement idk si ese es el problema
·
Juan Pablo Isaza
Denunciar
0
Empezaría con una función como esta:
function addIconToFreeSpace(id){ const mediaSource = `../media/${id}.png`; // dynamically select the target of the free questionmark-icon const targetSelection.style.backgroundImage = `url(${mediaSource};)`; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta