Question

0

107

Visualizações

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

about 4 years ago · Juan Pablo Isaza

3 Respostas

Responde à pergunta

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

about 4 years ago · Juan Pablo Isaza Relatório

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};)`;
}

about 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-05T10:21:20.475Z

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>

0

107

Clicking on image and appending it to the row in Javascript

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT