0
100
ViewsClicking on image and appending it to the row in Javascript
How can I add chess figure that I clicked on instead of a question mark, but every time I click on chess figure it should place it to the first "free" place, I mean first question mark
Here is html code for chess figures and first row of question marks:
<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>
And JS that changes only first question mark into pawn, because I don't know how to make everything else to work.
function myFunction(){
document.getElementById("question1").src = "../media/pawn.png";
}
·
Juan Pablo Isaza
3 answers
Answer question0
you can :
- recover event target with
e.target || e.srcElement - access needed
properties with
target.srcandtarget.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
Report
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;
}
}
} There is line through at event.target and event.srcElement idk if that is the problem
·
Juan Pablo Isaza
Report
0
I would start with a function like this:
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
Report
Answer question