单击图像并将其附加到 Javascript 中的行

Question

如何添加我点击的国际象棋图而不是问号，但是每次我点击国际象棋图时它都应该将它放置到第一个“免费”位置，我的意思是第一个问号

这是国际象棋数字和第一行问号的 html 代码：

            <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>

而 JS 只将第一个问号变为棋子，因为我不知道如何让其他一切正常工作。

function myFunction(){
    document.getElementById("question1").src = "../media/pawn.png";
}

Answer 1

我将从这样的 function 开始：

function addIconToFreeSpace(id){

    const mediaSource = `../media/${id}.png`;
    
    // dynamically select the target of the free questionmark-icon

    const targetSelection.style.backgroundImage = `url(${mediaSource};)`;
}

Answer 2

你可以：

• 使用e.target || e.srcElement e.target || e.srcElement
• 使用target.src和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>

Answer 3

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

如果这是问题所在，则在 event.target 和 event.srcElement idk 处有线路通过