Clicking 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";
}

Answer

you can :

recover event target with e.target || e.srcElement
access needed properties with target.src and target.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>

Advertisement

Answer